用jQuery实现一些导航条切换,显示隐藏的实例代码


Posted in Javascript onJune 08, 2013

代码如下:

<!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>
Javascript 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 #Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 #Javascript
EXTjs4.0的store的findRecord的BUG演示代码
Jun 08 #Javascript
JavaScript String.replace函数参数实例说明
Jun 06 #Javascript
jquery DIV撑大让滚动条滚到最底部代码
Jun 06 #Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 #Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 #Javascript
You might like
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
JS实现打字游戏
2019/12/17 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Sanic框架Cookies操作示例
2018/07/17 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
几款好用的python工具库(小结)
2020/10/20 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
综合素质的自我鉴定
2013/10/07 职场文书
法制宣传标语
2014/06/23 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS