jQuery CSS 菜单未选择活动链接答案

【问题标题】：jQuery CSS menu not selecting the active linkjQuery CSS 菜单未选择活动链接
【发布时间】：2010-04-14 22:12:58
【问题描述】：

这有什么问题，我该如何解决？

我有一个 CSS 菜单（水平），我希望在选择其中一项时更改背景和字体。我发现另一个帖子给了我一些 jQuery 代码来帮助它工作，我认为我的编码是正确的，但是当我点击一个项目来更改它的类时，它会添加类，但是背景和字体保持不变？这里有什么想法吗？

这是 HTML：

<ul id="menu_nav" class="buttons">
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 1</a>
  </li>
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 2</a>
  </li>
  <li>
    <a href="#" onclick="' . $menu_path . '">Item 3</a>
  </li>
</ul>

这是 CSS：

ul#menu_nav
{
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav a
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav a:hover {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}

.selected {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}

这是 jQuery：

$(function(){
  $(".buttons li>a").click(function(){
    $(this).parent().addClass('selected'). // <li>
      siblings().removeClass('selected');
  });
});

【问题讨论】：

您是否尝试过将 !important 添加到 css 属性哦 .selected 中？缩小您的问题范围。

标签： jquery css menu html-lists

【解决方案1】：

因为 CSS 继承。 ul#menu_nav a css 规则将始终超过 .selected 规则。尝试更改选择器

#ul.menu_nav a.selected{

}

【讨论】：

我有点困惑……你说的是css选择器还是jquery选择器？

【解决方案2】：

感谢您的提示，它帮助我重新思考自己回到更基本的东西...如果有人出现，下面是解决我遇到的问题的 css 和 jquery 代码。

基本上，我只是创建了两个类并将它们交换，然后使用一些 jquery 选择器来添加/删除类以获得我正在寻找的效果。

$(function(){
              $(".menu_buttons li>a").click(function(){
                $(this).addClass('selected').removeClass('button'). // <li>
                  parents().siblings().children("a").removeClass('selected').addClass('button');
              });
            });

最终的 css 如下所示：

ul#menu_nav
{
    float:left;
    width:790px;
    padding:0;
    margin:0;
    list-style-type:none;
    background-color:#000099;
}
ul#menu_nav a.button
{
    float:left;
    text-decoration:none;
    color:white;
    background-color:#000099;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}
ul#menu_nav a:hover {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;
}
ul#menu_nav li {display:inline;}

.selected {
    background-color:#F1F4FE;
    color:#000099;
    border-top:1px solid #CCCCCC;

    float:left;
    text-decoration:none;
    padding:0.2em 0.6em;
    border-right:1px solid #CCCCCC;

    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    font-weight: bold;
    position: relative;
    height: 21px;
    line-height:1.85em;
}

【讨论】：