css - 单击时链接颜色应保持不变，直到单击菜单中的另一个链接并再次恢复其颜色

Question

我想制作菜单，这样当我单击菜单项时，活动菜单项文本颜色应保持与悬停效果相同...我使用了 a:active 但它仅在页面/内容打开之前有效...一旦页面获取打开它的效果就消失了..我该怎么办..??

假设我将“黑色”颜色作为菜单项文本颜色的默认颜色，它的颜色在悬停时变为“白色”，在加载内容时再次变为“黑色”。它应该保持“白色”，直到我点击另一个菜单项即“活动”菜单项应保持其颜色。（所有菜单项都应如此）。我需要做什么才能达到这个效果？

我是 javascript 和 jquery 的新手....

Answer 1

如果在您单击时页面重新加载，那么您需要以某种方式在后端代码中将类名（例如“selected”）添加到所选元素。然后将与 :hover 相同的 CSS 规则应用于该元素。

否则，如果您不刷新页面，而是依靠 jQuery 来维持“选定”类型的状态，请执行以下操作：

HTML：

<ul id="menu">
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ul>

jQuery：

$('#menu li').click(function(){
    $('#menu li').removeClass('selected'); // remove selected from any other item first
    (this).addClass('selected'); //add selected to the one just clicked.
});

CSS

#menu li{color:black;background:white;}    
#menu li:hover, #menu li.selected{     
    color:white;background:black;    
    /* CSS properties here will be applied to both hovered */    
    /* and last-clicked item*/     
}    

Answer 2

你应该使用类序列

1-a：链接

2-a：已访问

3-a：悬停

4-a：主动

Answer 3

感谢浮士德的帮助，您的解决方案确实对我有用。不过，快速编辑一下，我认为“（this）”前面需要有一个“$”符号，或者至少这对我有用。所以：

$('#menu li').click(function(){
    $('#menu li').removeClass('selected'); // remove selected from any other item first
    $(this).addClass('selected'); //add selected to the one just clicked.
});