Question

在我的菜单上，我点击了jQuery后更改按钮的颜色 - 这样就会突出显示活动菜单。但我想显示用户已经点击的位置，而活动菜单保持蓝色。

用户点击菜单1变为蓝色
用户点击菜单2，它变为蓝色，菜单1为绿色
用户点击菜单3，它变为蓝色，菜单1和2为绿色等

我该怎么做？

我可以用蓝色显示活动菜单，但不能计算出正确显示已访问（a.degrees-visited）的代码。

DEMO FIDDLE： Fiddle

<ul id="nav">
<li><a href="#" class="nav-left degrees hide-show default-show" rel="menu1">Menu 1</a></li>
<li><a href="#" class="nav-left degrees hide-show" rel="menu2">Menu 2</a></li>   
<li><a href="#" class="nav-left degrees hide-show" rel="menu3">Menu 3</a></li>  
<li><a href="#" class="nav-left degrees hide-show" rel="menu4">Menu 4</a></li>

$('#nav li a.degrees').on('click', function(){
 $('li a.degrees-current').removeClass('degrees-current');
 $(this).addClass('degrees-current');
});

Answer 1

使用toggleClass（）

$('#nav li a.degrees').on('click', function(){
     $('li a.degrees-current').removeClass('degrees-current').addClass('degrees-visited');
     $(this).addClass('degrees-current');
});

演示：Fiddle

Answer 2

只需添加其他类：

$('#nav li a.degrees').on('click', function(){
 $('li a.degrees-current').removeClass('degrees-current');
 $(this).addClass('clicked');
 $(this).addClass('degrees-current');
});

在CSS中为该类设置样式：

.clicked{
background:green;
}

jQuery更改类以列出链接onclick

2 个答案: