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

Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例

Jun 02 Javascript

一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能

Sep 09 Javascript

Jquery 设置标题的自动翻转

Oct 03 Javascript

关于图片按比例自适应缩放的js代码

Oct 30 Javascript

七个很有意思的PHP函数

May 12 Javascript

jQuery检测某个元素是否存在代码分享

Jul 09 Javascript

JS基于面向对象实现的拖拽库实例

Sep 24 Javascript

基于Jquery easyui 选中特定的tab

Nov 17 Javascript

JavaScript中rem布局在react中的应用

Dec 09 Javascript

Vue 2.0的数据依赖实现原理代码简析

Jul 10 Javascript

微信小程序媒体组件详解（视频，音乐，图片）

Sep 19 Javascript

小程序实现筛子抽奖

May 26 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