提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery实现的导航条切换可显示隐藏

jQuery 实现 显示 切换 隐藏 导航条
2023-06-13 09:15:29 时间

用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle()，toggeClass()，toggle():

代码如下：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>导航条在项目中的应用</title>
<scriptlanguage="javascript"type="text/javascript"src="Jscript/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".tit").find("span").click(function(){
$(this).toggleClass("closeBtn2").parent().next().slideToggle();//实现内容隐藏显示，及图标的切换
});
$(".clsBot").click(function(){
$(this).parent().find("li:gt(4)").toggle();//实现内容索引值大于4的隐藏或者显示

})
})
</script>
<styletype="text/css">
*{margin:0;padding:0;}
ulli{list-style:none;}
.box{width:400px;margin:100pxauto;border:1pxsolid#ddd;}
.tit{background:#999;height:30px;color:#fff;font-size:14px;line-height:30px;padding-left:6px;position:relative;}
.closeBtn{background:url("Images/a2.gif")no-repeat00;width:7px;height:8px;position:absolute;right:10px;top:10px;display:block;text-indent:-9999px;cursor:pointer;}
.closeBtn2{background:url("Images/a1.gif")no-repeat00;}
.content{padding:6px;font-size:12px;overflow:hidden;}
.contentli{float:left;width:100px;height:24px;}
.contentlia{color:#999;}
.contentlia:hover{color:red;}
.clsBot{display:block;clear:both;background:url("Images/a5.gif")no-repeatright0;padding-right:16px;float:right;width:26px;cursor:pointer;color:blue;}
</style>
</head>
<body>
<divclass="box">
<divclass="tit">
<h2>图书分类</h2>
<spanclass="closeBtn">关闭</span>
</div>
<divclass="content">
<ul>
<li><ahref="#">小说</a><i>(1110)</i></li>
<li><ahref="#">文艺</a><i>(230)</i></li>
<li><ahref="#">青春</a><i>(1430)</i></li>
<li><ahref="#">少儿</a><i>(1560)</i></li>
<li><ahref="#">生活</a><i>(870)</i></li>
<li><ahref="#">社科</a><i>(1460)</i></li>
<li><ahref="#">管理</a><i>(1450)</i></li>
<li><ahref="#">计算机</a><i>(1780)</i></li>
<li><ahref="#">教育</a><i>(930)</i></li>
<li><ahref="#">工具书</a><i>(3450)</i></li>
<li><ahref="#">引进版</a><i>(980)</i></li>
<li><ahref="#">其它类</a><i>(3230)</i></li>
</ul>
<spanclass="clsBot">简化</span>
</div>
</div>
</body>
</html>

效果图：

相关文章