用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换，显示隐藏，主要运用的技术有slideToggle( )，toggeClass( )，toggle( ):
源码下载地址
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript" src="Jscript/jquery-1.4.2.min.js"></script>
<script type="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>
<style type="text/css">
*{ margin: 0;padding: 0;}
ul li{ list-style: none;}
.box{ width: 400px; margin: 100px auto; border: 1px solid #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-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent: -9999px; cursor: pointer;}
.closeBtn2{background: url("Images/a1.gif") no-repeat 0 0;}
.content{padding: 6px;font-size: 12px; overflow: hidden; }
.content li{ float: left; width: 100px; height: 24px; }
.content li a{ color: #999;}
.content li a:hover{ color: red;}
.clsBot{ display: block; clear: both; background: url("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue;}
</style>
</head>
<body>
<div class="box">
<div class="tit">
<h2>图书分类</h2>
<span class="closeBtn">关闭</span>
</div>
<div class="content">
<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>
<span class="clsBot">简化</span>
</div>
</div>
</body>
</html>
效果图：
用jQuery实现一些导航条切换，显示隐藏相关推荐
- 隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
- 微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下 我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
- 点击导航高亮 html,jQuery实现的导航条点击后高亮显示功能示例
本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: www.jb51.net jQuery导航条点击后高亮显示 #nav li {float: left; wi ...
- asp.net 包含动态创建控件的容器如果要切换显示/隐藏不要用 Visible 属性
asp.net 包含动态创建控件的容器如果要切换显示/隐藏不要用 Visible 属性 就是不用 XXX.Visible = false; // true 因为这样该容器及其子控件会彻底的从页面上消 ...
- 微信小程序中实现点击导航条切换页面（可左右滑动视图）
我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状 ...
- 微信小程序_点击二级导航条切换页面
gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动: 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, na ...
- js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...
- ribbon 收起 最小化 导航条 选项卡 navBarControl 隐藏
//设置隐藏导航条 this.ribbonControl.Minimized = true;正解//设置navBarControl隐藏 navBarControl.OptionsNavPane.Nav ...
- android tab 切换动画,Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）...
前言 之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果,比较简陋.这次改用ViewPager+TabLayout 实现联动的效果. 实现效果 ViewPager 多 ...
最新文章
- HDU3089（约瑟夫环问题）
- Linux/Debian/Ubuntu报错解决：W: Target Packages (main/binary-amd64/Packages) is configured multiple times
- 反射,Expression Tree,IL Emit 属性操作对比
- float32精度_混合精度对模型训练和推理的影响
- ZF1.* 愤怒小鸟系列二：快速自定义创建MVC
- 查看当前机器.net 版本的方法
- dom属性和html属性_HTML属性
- 检查图层当中是否存在高程基准（C++）ArcObject
- 程序员必备的css工具,8个提高效率的CSS实用工具
- [ 资料分享 ] Vue 源码分析与讲解 - 附下载地址
- HTC G14解锁S-OFF、刷机、获取ROOT权限
- The working copy needs to be upgraded
- 基于Python的动漫人物分类识别系统
- html白色的斜线,面试官：如何使用 CSS 实现斜线效果？
- 区块链相关的关键概念
- halcon算子中文对照
- 浅谈研究生对科研工作的那些认知误区
- Hadoop的NameNode在启动时都做了哪些事情？源码解析
- codeforces 549F Yura and Developers（分治、启发式合并）
- PHP引擎php.ini参数优化