javascript - 在 jQuery UI 菜单中使用 addClass

Question

我正在使用jQuery UI 菜单进行导航。我希望当一个项目被点击时，它的背景颜色应该改变（以显示活动状态），当用户点击另一个项目时，新项目的颜色应该改变，前一个项目的颜色应该恢复到原来的颜色。

我为此使用了 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');
  });
  });

Answer 1

在锚上应用样式而不是 li。因为锚的继承红色被覆盖.ui-widget-content a

.selected a {
    color:red;
}

演示

带背景颜色：-

演示

Answer 2

$(this).parent().siblings().removeClass('selected');
$(this).parent().addClass('selected');

.selected{
    color:red;
}

.selected a {
    color:inherit;
}

Answer 3

请看一下http://jsfiddle.net/PaHXs/8/

我可以知道这是否是您的要求。

我确实改变了

.selected{
    background-color:red;
}