jquery - 如何使用 jQuery 覆盖(已经)定义的带有嵌套 anchor 标记的 DIV 类的 CSS 样式？

Question

HTML:

<div id="main_menu">
    <a id="menu_item_articles" href="articles">articles</a>
</div>

CSS:

#main_menu {
    float: left;
    padding-top: 10px;
    vertical-align: middle;
    text-align: center;
    width: 500px;
}

#main_menu a {
    border: 1px solid #000;
    font-weight: bold;
    background: #fff;
    color: #000;
    padding: 7px;
    text-decoration: none;
}

#main_menu a:hover {
    border: 1px solid #000;
    font-weight: bold;
    background: #ff9935;
    color: #000;
    padding: 7px;
 text-decoration: none;
}

.selected_menu_item {
    background: #ff9935;
    color: #000;
}

我想通过 jQuery 做什么:

编辑:添加了缺失的代码位(pathArray)。它所做的只是根据是否是我的开发环境来获取路径。

var pathArray = $(location).attr('pathname').split('/');
var selectedMenuItem = (pathArray[1] == 'sitename') ? pathArray[2] : pathArray[1];
$('#menu_item_' + selectedMenuItem).attr('class', 'selected_menu_item');

基本上我想要实现的是获取当前页面 URI，将其拆分，从中获取页面名称，然后在页面加载完成时突出显示关联的菜单项(使用 $(document).ready( ))。

看起来我的 CSS 中的“#main_menu a”定义是一成不变的，新样式根本不适用。有什么建议吗？

Answer 1

您的 jQuery 代码似乎没有任何问题。但是，您需要更具体地使用 CSS .selected_menu_item类选择器:

#main_menu a.selected_menu_item {
    background: #ff9935;
    color: #000;
}

否则它的背景颜色将被#main_menu a中的内容覆盖。因为，将 ID 选择器放在 <div> 上，比单独的类选择器更具体。这就是为什么看起来好像您的类样式没有被应用的原因。