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

Question

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

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

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

Answer 1

如果在您单击时重新加载页面，那么您需要以某种方式在您的后端代码中为所选元素添加类名(比如“selected”)。然后将相同的 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*/     
}