Question

我正在使用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');
  });
  });

Answer 1

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

覆盖

.selected a {
    color:red;
}

Demo

使用背景颜色： -

Demo

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;
}

在jQuery UI菜单中使用addClass

3 个答案:

Demo

Demo