Question

我想制作制作菜单，当我点击菜单项时，活动菜单项文本颜色应该与悬停效果保持一致...我使用了：活动但它只能在页面/内容打开之前有效...一旦页面被打开，它的效果就会丢失。我该怎么做.. ??

假设我的菜单项文字颜色默认为“黑色”，其颜色在悬停时变为“白色”，内容加载后再变为“黑色”。在点击之前，它应保持“白色”另一个菜单项，即“活动”菜单项应该保持其颜色。（这应该是所有菜单项的情况）。为了达到这个效果，我需要做些什么？

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

Answer 1

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

否则，如果您没有刷新页面，并依赖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：悬停

4-A：活性

Answer 3

感谢Faust的帮助，您的解决方案对我来说真的很有用。一个快速编辑，我认为在“（这个）”之前需要有一个“$”符号，或者至少那个对我有用的符号。所以：

$('#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.
});

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

3 个答案: