图书分类交互示例-优快云博客

#======================================================================== # FileName: demo5.html # Author: lowkey # Email: 361789273@qq.com # HomePage: http://blog.youkuaiyun.com/Iamduoluo # LastChange: 2012-04-09 12:14:36 #======================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Demo5</title> <style type="text/css" media="screen"> body{ font-size:13px;} #divFrame{ border:solid 1px #666; width:301px; overflow:hidden;} #divFrame .clsHead{background-color:#eee; padding:8px; height:18px; cursor:hand;} #divFrame .clsHead h3{ padding:0px; margin:0px; float:left;} #divFrame .clsHead span{ float:right; margin-top:3px;} #divFrame .clsContent{padding:8px;} #divFrame .clsContent ul { list-style-type:none; margin:0px; padding:0px;} #divFrame .clsContent ul li { float:left; width:95px; height:23px; line-height:23px;} #divFrame .clsBot { float:right; padding-top:5px; padding-bottom:5px;} .GetFocus { background-color:#eee} </style> <script src="../jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(".clsHead").click(function() { if($(".clsContent").is(":visible")) { $(".clsHead span img") .attr("src", "a2.jpg"); $(".clsContent").css("display", "none"); }else{ $(".clsHead span img") .attr("src", "a2.jpg"); $(".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> </head> <body> <div id="divFrame" class=""> <div id="" class="clsHead"> <h3>图书分类</h3> <span><img src="a2.jpg" alt="" /></span> </div> <div id="" class="clsContent"> <ul id="" class=""> <li id="" class=""><a href="#">小说</a><i>(1110)</i></li> <li id="" class=""><a href="#">文艺</a><i>(1110)</i></li> <li id="" class=""><a href="#">青春</a><i>(1110)</i></li> <li id="" class=""><a href="#">少儿</a><i>(1110)</i></li> <li id="" class=""><a href="#">生活</a><i>(1110)</i></li> <li id="" class=""><a href="#">社科</a><i>(1110)</i></li> <li id="" class=""><a href="#">管理</a><i>(1110)</i></li> <li id="" class=""><a href="#">计算机</a><i>(1110)</i></li> <li id="" class=""><a href="#">教育</a><i>(1110)</i></li> <li id="" class=""><a href="#">工具书</a><i>(1110)</i></li> <li id="" class=""><a href="#">引进版</a><i>(1110)</i></li> <li id="" class=""><a href="#">其他类</a><i>(1110)</i></li> </ul> <div id="" class="clsBot"> <a href="#">简化</a> <img src="a2.jpg" alt="" /> </div> </div> </div> </body> </html>

导航条在项目中的应用