Question

如何实现导航栏中 当前栏目的样式 和 非当前栏目不同？

请看问题详细说明 ：
需要的结果是，如果是当前栏目，栏目背景变为黑色，字体为白色，其它非当前栏目就灰色背景，黑色字。且点击后这个样式要保留（黑底白字，这个是重点，不是简单的鼠标滑过效果）

再点击其它栏目后，此样式才换到被点击的栏目下。

补充一下，鼠标滑过样式可以和些样式同时出现
例如： 点击公司快报后，当前栏目为 黑底白字， 鼠标“滑过”其它栏目时，公司快报 这个栏目 样式是不变的，在点击其它栏目后 黑底白字 的样式才换到被点击的栏目下。

这个样式用的比较多，也看了一些别人写的样式，自己用的时候总是会不完整。在线座等，欢迎大神给出标准意见。谢谢！
求答案呀！

Answer 1

楼上的 敢问点击链接后页面一般会发生跳转吧 跳转相当于刷新了 那么你这js的点击效果相当于无效了。除非是iframe或者框架结构的。所以我觉的这个是要跟后台语言代码结合吧

Answer 2

拿鼠标移上跟当前效果一样举例：

html代码：

<ul class="navi">
    <li class="current"><a href="##">公司简介</a></li>
    <li><a href="##">公司快报</a></li>
    <li><a href="##">人才招聘</a></li>
    <li><a href="##">公约</a></li>
</ul>

css代码：

.navi li a { padding: 5px 10px; width: 160px; color: #999; background: #ccc; display: inline-block;text-decoration: underline;}
.navi li a:hover { color: #fff; background: #000;}
.navi li.current a {color: #fff; background: #000;}

js代码：

$(".navi li a").click(function(){
    $(".navi li").removeClass("current");
    $(this).parent().addClass("current");
})

有啥问题追问！！！！

追问

用你的JS　会出现点人才招聘后，公司简介这项黑底还在，不会消失，正常这里应该没有的，且鼠标移走或点页面空白的地方，人才招聘这里的背景就没有了，这两处有点问题！

追答

js代码里面的removeClass加了？默认的html代码里面没有current（注），后面一个不是很明白；

追问

能把你的JS 代码 写完整吗？ 其它地方是复制你这个的
鼠标移走 或是 点页面空白的地方，人才招聘这里的背景就没有了（就是消失了），但是上面的还有，具体点一下就知道了

方便 加个QQ吗？

追答

js代码：

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
    $(function(){
    $(".navi li a").click(function(e){
    $(".navi li").removeClass("current");
    $(this).parent().addClass("current");
    return false;
    e.stopPropagation();
    e.preventDefault();
})
$("body").click(function(){
    $(".navi li").removeClass("current");
})
})
</script>

css，html没啥变化