javascript - 在 jQuery UI 菜单中使用 addClass

Question

我正在使用 jQuery UI Menu用于导航目的。我希望当一个元素被点击时，它的背景颜色应该改变(以显示事件状态)，当用户点击其他元素时，新元素的颜色应该改变，而前一个元素的颜色应该恢复到原来的颜色。

我为此使用了 addClass，但不知何故它不起作用，让我知道我哪里做错了。

Fiddle link

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

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

覆盖

.selected a {
    color:red;
}

Demo

带背景色:-

Demo