编程 Javascript

用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 相关文章推荐

用cookies实现的可记忆的样式切换效果代码下载

Dec 24 Javascript

jQuery 渐变下拉菜单

Dec 15 Javascript

js 效率组装字符串 StringBuffer

Dec 23 Javascript

js定时器的使用(实例讲解)

Jan 06 Javascript

jQuery中hasClass()方法用法实例

Jan 06 Javascript

jquery实现搜索框常见效果的方法

Jan 22 Javascript

jQuery插件bxSlider实现响应式焦点图

Apr 12 Javascript

jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

Sep 04 Javascript

CodeMirror js代码加亮使用总结

Mar 25 Javascript

详解关于react-redux中的connect用法介绍及原理解析

Sep 11 Javascript

使用node打造自己的命令行工具方法教程

Mar 26 Javascript

vue2中,根据list的id进入对应的详情页并修改title方法

Aug 24 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