jquery入门—编写一个导航条(可伸缩)
更新时间：2013年01月07日 11:08:03 作者：
编写一个导航条，单击标题时，可以伸缩导航条内容，简化内容或显示更多内容等等效果相当不错，感兴趣的朋友可以了解下哦
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、效果图：
示例代码如下：
复制代码 代码如下:
<!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、效果图：
点击后：
简化后：
相关文章
这篇文章主要介绍了jQuery实现DIV层收缩展开的方法,实例分析了jQuery中toggle与animate等方法的使用技巧,需要的朋友可以参考下2015-02-02
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
在上一篇文章《如何确保JavaScript的执行顺序 - 之jQuery.html深度分析》中，我们揭示了jQuery.html函数之所以能在各种浏览器下保持动态JS顺序执行，其秘密在于 – 同步AJAX获取外部JavaScript。2011-03-03
这篇文章主要为大家详细介绍了jQuery轮播图的实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
为了试着用jQuery找出一个table中没有colspan属性的td，试了很多种方法，这个是最好的，记在这里，下次不要再忘了2010-07-07
这篇文章主要为大家详细介绍了jQuery实现扫雷小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
短几句jquery代码实现一个图片向上滚动切换，需要的朋友可以参考下。2011-09-09
这篇文章主要介绍了jQuery实现弹出窗口弹出div层的实例代码,点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击,，具体实现代码大家参考下本文吧2017-01-01
这篇文章主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下2015-01-01
jQuery操作Select的Option上下移动及移除添加等等
jQuery操作Select Option：向上移动选中的option、向下移动选中的option、移除选中的option、获取所有的option值、添加option等等，下面有个不错的示例，感兴趣的朋友不要错过2013-11-11
下面小编就为大家带来一篇引用jquery框架后出错的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论