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

 更新时间:2013年06月08日 11:07:47   作者:  
用jQuery实现一些导航条切换,显示隐藏的实例代码,需要的朋友可以参考一下

代码如下:

复制代码 代码如下:

<!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实现点击消失的代码

    jquery实现点击消失的代码

    这篇文章主要介绍了jquery如何实现点击消失,需要的朋友可以参考下
    2014-03-03
  • jqgrid 编辑添加功能详细解析

    jqgrid 编辑添加功能详细解析

    本文是对jqgrid 编辑添加功能进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jQuery 3.0十大新特性

    jQuery 3.0十大新特性

    在2016年6月迎来了jquery3.0最终版,jquery3.0有哪些新特征呢?很多朋友不是很清楚,下面小编给大家带来了jQuery 3.0十大新特性,感兴趣的朋友一起看下吧
    2016-07-07
  • jquery判断checkbox是否选中及改变checkbox状态的实现方法

    jquery判断checkbox是否选中及改变checkbox状态的实现方法

    下面小编就为大家带来一篇jquery判断checkbox是否选中及改变checkbox状态的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 详解JavaScript for循环中发送AJAX请求问题

    详解JavaScript for循环中发送AJAX请求问题

    这篇文章主要为大家剖析了JavaScript for循环中发送AJAX请求问题,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 基于JQuery的多标签实现代码

    基于JQuery的多标签实现代码

    最近在学习JQuery,其实也不叫学习,很久以前就学过,只是有一段时间没用,有些生疏了,于是就做几个小例子来练习练习,为了方便以后查找就将这些小示例记录下来
    2012-09-09
  • jQuery实现公告文字左右滚动的实例代码

    jQuery实现公告文字左右滚动的实例代码

    这篇文章介绍了jQuery实现公告文字左右滚动的实例代码,有需要的朋友可以参考一下
    2013-10-10
  • 浅谈jQuery hover(over, out)事件函数

    浅谈jQuery hover(over, out)事件函数

    下面小编就为大家带来一篇浅谈jQuery hover(over, out)事件函数。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-12-12
  • jQuery 入门级学习笔记及源码

    jQuery 入门级学习笔记及源码

    本周公司技术讲座轮到我了,准备说说现在流行的jQuery,下面是概要提纲,关键是看custom.js,已上传源码,程序中“//##”是分段用的,大家可以根据每一段取消注释,然后找到相应的id或class名查看效果。
    2010-01-01
  • jquery插入兄弟节点的操作方法

    jquery插入兄弟节点的操作方法

    下面小编就为大家带来一篇jquery插入兄弟节点的操作方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12

最新评论