用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 相关文章推荐
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
JS严格模式原理与用法实例分析
Apr 27 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
php中数据的批量导入(csv文件)
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php计算函数执行时间的方法
2015/03/20 PHP
php链表用法实例分析
2015/07/09 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
layui导航栏实现代码
2017/05/19 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
校园学雷锋活动月总结
2014/03/09 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
企业计划生育责任书
2015/05/09 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
迎新年主持词
2015/07/06 职场文书