Question

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

我有一个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');
  });
});

Answer 1

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

#ul.menu_nav a.selected{

}

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

jQuery CSS菜单没有选择活动链接

2 个答案: