JQuery导航条在项目中的应用

来源：互联网发布：餐饮软件编辑：程序博客网时间：2024/05/21 14:41

<head>
    <title>导航条在项目中的应用</title>
    <style type="text/css">
    boby{font-size:13px}
    #divFrame{border:solid 1px #666;width:301px;overflow:hidden;}
    #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand;}
    #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
    #divFrame .clsHead span{float:right;margin-top:3px}
    #divFrame .clsContent{padding:8px}
    #divFrame .clsContent ul{list-style-type:none;margin:0px;padding:0px}
     #divFrame .clsContent ul li{float:left;width:95px;height:23px;line-height:23px;}
    #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
    .GetFocus{background-color:#eee}
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.clsHead').click(function () {
                if ($('.clsContent').is(":visible")) {
                    $('.clsHead span img')
            .attr('src', 'images/22.png')
                    $('.clsContent').css('display', 'none');
                } else {

                    $('.clsHead span img')
                .attr('src', 'images/11.png');
                    $('.clsContent').css('display', 'block');
                }

});

            $('.clsBot>a').click(function () {
                if ($('.clsBot>a').text() == "简化") {
                    //隐藏index号大于4且不是最后一项的元素

                    $('ul li:gt(4):not(:last)').hide(2000);
                    $('.clsBot>a').text("更多");
                }
                else {

                    $('ul li:gt(4):not(:last)')
                    .show(2000)
                    .addClass('GetFocus');
                    $('.clsBot>a').text("简化");
                }
            })
        })
    </script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
    <h3>图书分类</h3>
    <span><img src="images/11.png" alt="" /></span>
</div>
<div class="clsContent">
<ul>
   <li><a href="#">小说</a><i>(1110)</i></li>
   <li><a href="#">文艺</a><i>(1110)</i></li>
   <li><a href="#">青春</a><i>(1110)</i></li>
   <li><a href="#">少儿</a><i>(1110)</i></li>
   <li><a href="#">生活</a><i>(1110)</i></li>
   <li><a href="#">社科</a><i>(1110)</i></li>
   <li><a href="#">管理</a><i>(1110)</i></li>
   <li><a href="#">计算机</a><i>(1110)</i></li>
   <li><a href="#">教育</a><i>(1110)</i></li>
   <li><a href="#">工具书</a><i>(1110)</i></li>
   <li><a href="#">引进版</a><i>(1110)</i></li>
   <li><a href="#">其他类</a><i>(1110)</i></li>
</ul>
   <div class="clsBot"><a href="#">简化</a>
      <img src="images/11.png" alt=""/>
   </div>
</div>
</div>
</body>