在jQuery UI菜单中使用addClass

Using addClass in jQuery UI Menu

本文关键字：addClass 菜单 jQuery UI      更新时间：2023-09-26

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

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

覆盖
.selected a {
    color:red;
}
演示

背景颜色:-

演示

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

我可以知道这是否是你的要求吗?

I did change in 

.selected{
    background-color:red;
}

$(this).parent().siblings().removeClass('selected');
$(this).parent().addClass('selected');
.selected{
    color:red;
}
.selected a {
    color:inherit;
}
相关文章：