jquery入门—编写一个导航条(可伸缩)

1、编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容。示例代码如下：复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> </script> <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 type="text/javascript"> $(function(){ //页面加载事件 $(".clsHead").click(function(){ //图片点击事件 if($(".clsContent").is(":visible")){ //如果内容可见 $(".clsHead span img").attr("src","Images/a1.gif"); //改变图片 $(".clsContent").css("display","none"); //隐藏内容 }else{ $(".clsHead span img").attr("src","Images/a2.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/a2.gif" alt="book!"/></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> ( 3230 ) </i></li> </ul> </div> <div class="clsBot"> <a href="#">简化</a> <img src="Images/a5.gif" alt=""/> </div> </div> </BODY> </HTML> 2、效果图：点击后：简化后：

　　推荐阅读

　　鼠标滚轮控制网页横向移动实现思路

复制代码代码如下: <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> $('body').mousewheel(function(event, delta) >>>详细阅读

本文标题：jquery入门—编写一个导航条(可伸缩)

地址：http://www.17bianji.com/kaifa2/JS/22582.html

1/2 1