weixin_45133795
我不会啊!!!
采纳率100%
2019-07-08 16:39

求教大神,点击li给出样式,页面刷新保留li的样式,再点击其他li上一个li样式恢复,这个改变

已采纳

左侧导航栏目,右侧内容,点击导航栏目右侧内容改变,选中的导航栏目改变背景色,由于右侧内容刷新导致左侧选中的栏目背景也消失,这个怎么改点导航栏目改变背景色,刷新任然保留样式,点击其他导航栏目,上一个恢复正常,这个栏目变色。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • qq_41191401 一只成序源 2年前

    1>把导航栏和右侧内容分开为两个模块,两边就互不影响了2>全部一个模块,显示的内容用display:block;不显示的用display:none;点击的时候在点击事件里动态改变display的属性值就可以做到点哪个显示哪部分内容,样式改变也可以用js去加,减样式。

    例子:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
       <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    <body>
        <style>
            .tored{
                color: red;
            }
            .disshow{
                display: none;
            }
        </style>
    <ul>
        <li id="tx">腾讯</li>
        <li id="al">阿里</li>
        <li id="bd">百度</li>
        <li id="wy">网易</li>
        <li id="tc">同程</li>
    </ul>
    <div>
        <div id="txdesc"  class="disshow">这是腾讯</div>
        <div id="aldesc"  class="disshow">这是阿里</div>
        <div id="bddesc"  class="disshow">这是百度</div>
        <div id="wydesc"  class="disshow">这是网易</div>
        <div id="tcdesc"  class="disshow">这是同程</div>
    </div>
    
    <script>
             $(function(){
                $("#tx").on("click",function(){
                    $("#tx").addClass("tored").siblings().removeClass("tored");
                    $("#txdesc").removeClass("disshow").siblings().addClass("dissh   ow");
                });
                $("#al").on("click",function(){
                    $("#al").addClass("tored").siblings().removeClass("tored");
                    $("#aldesc").removeClass("disshow").siblings().addClass("disshow");
                });
                $("#bd").on("click",function(){
                    $("#bd").addClass("tored").siblings().removeClass("tored");
                    $("#bddesc").removeClass("disshow").siblings().addClass("disshow");
                });
                $("#wy").on("click",function(){
                    $("#wy").addClass("tored").siblings().removeClass("tored");
                    $("#wydesc").removeClass("disshow").siblings().addClass("disshow");
                });
                $("#tc").on("click",function(){
                    $("#tc").addClass("tored").siblings().removeClass("tored");
                    $("#tcdesc").removeClass("disshow").siblings().addClass("disshow");
                });
          })
    </script>
    
    </body>
    </html>
    

    改下jQuery版本,需要1.10版本以上的

    点赞 1 评论 复制链接分享
  • qq_35235940 听楼一夜雨 2年前

    根据栏目id判断当前栏目,设置为默认选中就行了吧,相当于选中样式是根据栏目判断而不是点击事件去判断

    点赞 1 评论 复制链接分享