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


Posted in Javascript onOctober 22, 2014

用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实现的导航条切换可显示隐藏

Javascript 相关文章推荐
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
javascript头像上传代码实例
Sep 28 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
Javascript原型链和原型的一个误区
Oct 22 #Javascript
Javascript this 关键字 详解
Oct 22 #Javascript
Javascript 构造函数详解
Oct 22 #Javascript
Javascript中Array.prototype.map()详解
Oct 22 #Javascript
You might like
Php注入点构造代码
2008/06/14 PHP
php生成略缩图代码
2012/07/16 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
php如何连接sql server
2015/10/16 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python实现excel读写数据
2021/03/02 Python
替换python字典中的key值方法
2018/07/06 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
专升本个人自我评价
2013/12/22 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
励志演讲稿500字
2014/08/21 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书