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

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

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版本以上的

qq_41191401
一只成序源 回复weixin_45133795: 采用ajax异步请求,局部刷新。
9 个月之前 回复
weixin_45133795
weixin_45133795 回复一只成序源: 有没有可以刷新不复原的
9 个月之前 回复
qq_41191401
一只成序源 回复weixin_45133795:刷新页面肯定就复原了
9 个月之前 回复
weixin_45133795
weixin_45133795 效果很好,就是右侧内容下一页就又全部刷新了
9 个月之前 回复

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

weixin_45133795
weixin_45133795 这个怎么设置,求大神给个简单的模板
9 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

0
eric6 pyqt5 怎么实现类似qq聊天窗口的合并
7
Fragment中RecycleView需要拖动才刷新
1
求教大神定义这个接口有什么有,把接口注释掉运行起来一样的
1
求教大神 codingame中coders strick back
1
计算机系统基础实验中出现的问题,炸弹的实验,详见图片倒数第二、三行。求教大神!
0
请问我在给DSP(28335)编译的时候出现了如下错误,向大神求教该怎么解决?
1
求教大神,关于网页唤醒支付宝
5
小白不知道,哪里错了,按着别人的代码敲的,请大神解答,顺便求教JAVA自学方法。
0
C# Winform webbrowser怎样一次性获取携程网某酒店所有的评论数据呢
0
redhat6.9 配置本地 yum之后,系统自动回归到配置更改之前,求教大神是如何原因
2
小白求教各位大神,关于java,求余数
0
不明白为什么会报错,大神求教!!!
1
我想请教虹膜识别定位后的问题,matlab代码,详细解释的,本人新手,光代码看不懂,谢谢,求教大神?
3
求助大佬,html li标签中出现了文字错位!
0
小白求教 点击父页面的一个按钮 怎么触发iframe里的方法
0
spyder 无法启动了,求教各位大神帮忙出出主意
2
求教大神,原生JS,我想选中表格中的A标签。我写的代码怎么写都不对,求帮助。
2
求教大神 centos6.5 安装 linux.x65 oracle11g,./runInstal
1
在安装robotframework的AutoItLibrary库的时候遇到一个报错File "setup.py", line 57,求教各位大神
3
使用Apexcharts.js中的brush类型图表,上面的折线图无法刷新,求教问题在哪?