我不会啊！！！ 2019-07-08 16:39 采纳率: 0%
浏览 612
已采纳

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

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

  • 写回答

2条回答

  • 一只成序源 2019-07-08 17:10
    关注

    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条)

报告相同问题？

悬赏问题

  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗？
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候，驱动要重新装才能使用，怎么解决？
  • ¥15 让node服务器有自动加载文件的功能
  • ¥15 jmeter脚本回放有的是对的有的是错的
  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型