导航条制作

来源：互联网发布：上海百度关键词优化编辑：程序博客网时间：2024/04/29 11:49
<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>导航条制作</title>  <script src="jquery-1.8.0.js"></script> </head> <style type="text/css">body{font-size:13px;}#divFrame{border:solid 1px #666;width:301px;overflow:hidden;}#divFrame .clsHead{background-color:#eee;padding:8px;height:32px;cursor:hand;}#divFrame .clsHead h3{padding:0px;margin:0px;float:left;}#divFrame .clsHead span{float:right;margin-top:0px;}#divFrame .clsContent{padding:8px;}#divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px;}#divFrame .clsContent ul li{float:left;width:90px;height:23px;line-height:23px;}#divFrame .clsBot{float:right;padding-bottom:5px;padding-top:5px;}.getFocus{background-color:#eee;} </style>  <script type="text/javascript">$(function(){$(".clsHead").click(function(){if($(".clsContent").is(":visible")){$(".clsHead span img").attr("src","Images/7893423.png");$(".clsHead span img").css("width","18");$(".clsHead span img").css("height","18");$(".clsContent").css("display","none");}else{$(".clsHead span img").attr("src","Images/mumber_1.png");$(".clsHead span img").css("width","32");$(".clsHead span img").css("height","32");$(".clsContent").css("display","block");}});$(".clsBot > a").click(function(){if($(".clsBot > a").text()=="简化"){$("ul li:gt(4):not(:last)").hide();$(".clsBot > a").text("更多");}else{$("ul li:gt(4):not(:last)").show().addClass("getFocus");$(".clsBot > a").text("简化");}});}); </script> <body>  <div id="divFrame"><div class="clsHead"><h3>图书分类</h3><span><img src="Images/mumber_1.png" width="32" height="32" alt="" /></span></div><div class="clsContent"><ul><li><a href="#">小说1</a><i>（675）</i></li><li><a href="#">小说2</a><i>（564）</i></li><li><a href="#">小说3</a><i>（545）</i></li><li><a href="#">小说4</a><i>（343）</i></li><li><a href="#">小说5</a><i>（343）</i></li><li><a href="#">小说6</a><i>（564）</i></li><li><a href="#">小说7</a><i>（878）</i></li><li><a href="#">小说8</a><i>（876）</i></li><li><a href="#">小说9</a><i>（5435）</i></li><li><a href="#">小说10</a><i>（10）</i></li><li><a href="#">小说11</a><i>（54）</i></li><li><a href="#">其他类</a><i>（434）</i></li></ul></div><div class="clsBot"><a href="#">简化</a><img src="Images/2.jpg" width="32" height="24" alt="" /></div>  </div> </body></html>
0 0