jQuery导航条在项目中的实施
发布时间：2021-11-23 16:07:30 所属栏目：教程 来源：互联网
导读：jQuery导航条在项目中的应用: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=http://www.w3.org/1999/xhtml head titlejquery导航条在项目中的应用/title style type=t
|
jQuery导航条在项目中的应用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery导航条在项目中的应用</title> <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: 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="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //页面加载事件 $(".clsHead").click(function () { if ($(".clsContent").is(":visible")) { //如果内容可见 $(".clsHead span img").attr("src", "Images/a2.gif"); //改变图片 $(".clsContent").css("display", "none"); //隐藏内容 } else { $(".clsHead span img").attr("src", "Images/a1.gif"); $(".clsContent").css("display", "block"); //显示内容 } }); $(".clsBot > a").click(function () { if ($(".clsBot > a").text() == "简化") { //如果内容为'简化'字样 $("ul li:gt(4):not(:last)").hide(); //隐藏index号大于4且不是最后一项的元素 $(".clsBot > a").text("更多"); } else { $("ul li:gt(4):not(:last)").show().addClass("GetFocus"); //显示所选元素且增加样式 $(".clsBot > a").text("简化"); } }); }); </script> </head> <body> <div id="divFrame"> <div class="clsHead"> <h3> 图书分类</h3> <span> <img src="Images/a1.gif" alt="" /></span> </div> <div class="clsContent"> <ul> <li><a href="#">小说</a><i>(1110)</i></li> <li><a href="#">文艺</a><i>(230)</i></li> <li><a href="#">青春</a><i>(1430)</i></li> <li><a href="#">少儿</a><i>(1560)</i></li> <li><a href="#">生活</a><i>(870)</i></li> <li><a href="#">社科</a><i>(1460)</i></li> <li><a href="#">管理</a><i>(1450)</i></li> <li><a href="#">计算机</a><i>(1780)</i></li> <li><a href="#">教育</a><i>(930)</i></li> <li><a href="#">工具书</a><i>(3450)</i></li> <li><a href="#">引进版</a><i>(980)</i></li> <li><a href="#">其他类</a><i>(3220)</i></li> </ul> <div class="clsBot"> <a href="#">简化</a> <img src="Images/a5.gif" alt="" /> </div> </div> </div> </body> </html>  （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
