用jquery中动态添加删除class制作导航栏

最新推荐文章于 2019-07-26 10:08:59 发布

大兔纸

最新推荐文章于 2019-07-26 10:08:59 发布

阅读量854

点赞数

分类专栏：杂项

本文链接：https://blog.csdn.net/bigRabbit741/article/details/69378642

版权

杂项专栏收录该内容

3 篇文章 0 订阅

订阅专栏

偶是一只并不想搬代码的搬着代码的小白兔

我想把导航栏点击后高亮类似这样：

 <ul id="modelToolBar">

                     <li id="huafangzi" class="normal" >画房子</li>
                     <li id="yangbanjian" class="normal" >样板间</li>
                     <li id="shoucang" class="normal" >收藏</li>
                     <li id="doorwindow" class="normal">门窗<span class="caret"></span></li>

                     <li id="door" class="doorwindowdown down" >门</li>
                     <li id="window" class="doorwindowdown down" >窗</li>

                     <li id="hard" class="normal" >硬装<span class="caret"></span></li>

                     <li id="diban" class="harddown down" >地板</li>
                     <li id="qiangmian" class="harddown down" >墙面</li>
                     <li id="tianhua" class="harddown down">天花</li>

                     <li id="furniture" class="normal" >家具<span class="caret"></span></li>

                     <li id="shafa" class="furnituredown down" >沙发</li>
                     <li id="chuang" class="furnituredown down" >床</li>
                     <li id="zhuozi" class="furnituredown down" >桌子</li>
                     <li id="guizi" class="furnituredown down" >柜子</li>
                     <li id="yizi" class="furnituredown down" >椅子</li>
                     <li id="chuwei" class="furnituredown down" >厨卫</li>

                     <li id="lighting" class="normal" >灯饰</li>
                     <li id="electrical"class="normal" >家电</li>
                     <li id="ornament" class="normal" >装饰</li>
                     <li id="other" class="normal">其它</li>
                   </ul>

CSS:

        #modelToolBar
        {
            position:absolute;
            left: 0px;
            right: 0px;
            list-style-type:none;
            margin:0;
            padding:0;
            background-color:#09141c ;
            top: 0px;
            height: 100vw;
        }
        li.normal
        {
            margin:0;
            display:block;
            font-weight:bold;
            color:#d4d4d4;
            background-color: #09141c;

            text-align:center;
            padding:10px;
            text-decoration:none;
            text-transform:uppercase;
        }
        li.down
        {
            margin:0;
            display:block;
            font-weight:bold;
            color: #000000;
            background-color: #ffffff;

            height: 30px;
            text-align:center;
            padding:5px;
            text-decoration:none;
            text-transform:uppercase;
        }

        li:active, li:focus, li:hover,.li-active
        {
            cursor: pointer;
            color:#000000;
            background-color: #e8e8e8;

            margin:0;
            display:block;
            font-weight:bold;

            text-align:center;
            padding:10px;
            text-decoration:none;
            text-transform:uppercase;
        }

JS:

   $('.normal').click( function (e) {
       $("ul li").removeClass("li-active").addClass("normal");
          var target = e.target;
          target.className = 'li-active';
   });