左侧导航栏目，右侧内容，点击导航栏目右侧内容改变，选中的导航栏目改变背景色，由于右侧内容刷新导致左侧选中的栏目背景也消失，这个怎么改点导航栏目改变背景色，刷新任然保留样式，点击其他导航栏目，上一个恢复正常，这个栏目变色。
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版本以上的
根据栏目id判断当前栏目，设置为默认选中就行了吧，相当于选中样式是根据栏目判断而不是点击事件去判断