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

【问题标题】：link color should remain same when clicked until clicking on another link in menu and revert its color again单击时链接颜色应保持不变，直到单击菜单中的另一个链接并再次恢复其颜色
【发布时间】：2012-05-21 17:08:33
【问题描述】：

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

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

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

【问题讨论】：

你能贴出你目前使用的 HTML/CSS/JavaScript 吗？也许使用 jsfiddle.net 构建一个示例

标签： css

【解决方案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*/     
}

【讨论】：

伙计们，这不提供解决方案，只有在不涉及重新加载的情况下才会起作用

【解决方案2】：

你应该使用类序列

1-a:链接

2-a：访问过

3-a:悬停

4-a:主动

【讨论】：

【解决方案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.
});

【讨论】：

当页面重新加载jquery效果消失时不起作用:(*