使用JQuery实现导航条

最新推荐文章于 2022-04-07 18:04:27 发布

qizhichao110

最新推荐文章于 2022-04-07 18:04:27 发布

阅读量828

点赞数

分类专栏： JQuery知识点

本文链接：https://blog.csdn.net/qizhichao110/article/details/8816428

版权

JQuery知识点专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<head>
    <title>导航条</title>
    <style type="text/css">
    body{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 h1{padding:0px;margin:0px;float:left}
    #divFrame .clsContent{padding:8px}
    #divFrame .clsContent ul{padding:0px;margin:0px;list-style-type:none}
    #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")) {//如果内容可见

//内容隐藏
$(".clsContent").css("display", "none");

}
else {

                       //内容显示
                    $(".clsContent").css("display", "block");
                }
            });
            $(".clsBot>a").click(function () {/热点链接单击事件

//如果内容为“简化”字样
if ($(".clsBot>a").text() == "简化") {

// 隐藏index号大于4且不是最后一项的元素；4秒内隐藏掉
$("ul li:gt(4):not(:last)").hide(4000);

                      //将字符内容改为“更多”
                    $(".clsBot>a").text("更多");
                }
                else {
                    $("ul li:gt(4):not(:last)").show().addClass("GetFocus");//显示所选元素且增加样式

                    // 将字符内容更改为“简化”
                    $(".clsBot>a").text("简化");
                }
            });
        });
    </script>
</head>
<body>
<div id="divFrame">
    <div class="clsHead">
    <h1>图书分类</h1>
    </div>
    <div class="clsContent">
     <ul>
     <li>数学</li>
     <li>语文</li>
     <li>英语</li>
     <li>历史</li>
     <li>政治</li>
     <li>生物</li>
     <li>物理</li>
     <li>化学</li>
     <li>地理</li>
     <li>高数</li>
     <li>css</li>
     <li>html</li>
     <li>javascript</li>
     <li>ado.net</li>
     <li>asp.net</li>
     <li>动画</li>
     <li>计算机</li>
     <li>社会</li>
     <li>生活</li>
     <li>体育</li>
     <li>文艺</li>
     <li>高级版</li>
     <li>引进版</li>
     <li>其他类</li>
     </ul>
     </div>
     <div class="clsBot"><a href="#">简化</a></div>
</div>
</body>
</html>

当程序运行起来，我们首先看到下面的这张图片，

这张是当我点击“简化”字样时，下面是我设置的4秒内消失的过程，消失完成就是右边显示的图片；

当我点击“更多”字样时，就会把内容全部显示，并且有样式的改变，

当我点击”图书分类“标题时就是全部没显示的效果，再点击一下就会出现内容。

qizhichao110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用JQuery实现导航条

导航条 body{font-size:13px;} #divFrame{border:solid 1px #666;width:301px;overflow:hidden} #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand} #divFrame
复制链接

扫一扫