我正在使用 jQuery UI Menu用于导航目的。我希望当一个元素被点击时,它的背景颜色应该改变(以显示事件状态),当用户点击其他元素时,新元素的颜色应该改变,而前一个元素的颜色应该恢复到原来的颜色。
我为此使用了 addClass,但不知何故它不起作用,让我知道我哪里做错了。
HTML:
<ul id="menu" class="nav">
<li><a href="#" >Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
CSS:
.selected{
color:red;
}
jQuery
$(function() {
$( "#menu" ).menu();
});
$(function () {
$(".nav a").click(function () {
$(this).parent().addClass('selected'). // <li>
siblings().removeClass('selected');
});
});
最佳答案
在 anchor 而不是 li 上应用样式。因为 anchor 继承的红色被 .ui-widget-content a
.selected a {
color:red;
}
Demo
带背景色:-
Demo
关于javascript - 在 jQuery UI 菜单中使用 addClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16828239/