<head>
<title>导航条</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 h1{padding:0px;margin:0px;float:left} #divFrame .clsContent{padding:8px} #divFrame .clsContent ul{padding:0px;margin:0px;list-style-type:none} #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-1.9.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () {//页面加载事件 $(".clsHead").click(function () {//单击事件 if ($(".clsContent").is(":visible")) {//如果内容可见//内容隐藏
$(".clsContent").css("display", "none");}
else {//内容显示
$(".clsContent").css("display", "block"); } }); $(".clsBot>a").click(function () {/热点链接单击事件//如果内容为“简化”字样
if ($(".clsBot>a").text() == "简化") {// 隐藏index号大于4且不是最后一项的元素；4秒内隐藏掉
$("ul li:gt(4):not(:last)").hide(4000);//将字符内容改为“更多”
$(".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"> <h1>图书分类</h1> </div> <div class="clsContent"> <ul> <li>数学</li> <li>语文</li> <li>英语</li> <li>历史</li> <li>政治</li> <li>生物</li> <li>物理</li> <li>化学</li> <li>地理</li> <li>高数</li> <li>css</li> <li>html</li> <li>javascript</li> <li>ado.net</li> <li>asp.net</li> <li>动画</li> <li>计算机</li> <li>社会</li> <li>生活</li> <li>体育</li> <li>文艺</li> <li>高级版</li> <li>引进版</li> <li>其他类</li> </ul> </div> <div class="clsBot"><a href="#">简化</a></div></div></body></html>当程序运行起来，我们首先看到下面的这张图片，
这张是当我点击“简化”字样时，下面是我设置的4秒内消失的过程，消失完成就是右边显示的图片；
当我点击“更多”字样时，就会把内容全部显示，并且有样式的改变，
当我点击”图书分类“标题时就是全部没显示的效果，再点击一下就会出现内容。
