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”定义是一成不变的,新样式根本不适用。有什么建议吗?
最佳答案
您的 jQuery 代码似乎没有任何问题。但是,您需要更具体地使用 CSS .selected_menu_item
类选择器:
#main_menu a.selected_menu_item {
background: #ff9935;
color: #000;
}
否则它的背景颜色将被#main_menu a
中的内容覆盖。因为,将 ID 选择器放在 <div>
上,比单独的类选择器更具体。这就是为什么看起来好像您的类样式没有被应用的原因。
关于jquery - 如何使用 jQuery 覆盖(已经)定义的带有嵌套 anchor 标记的 DIV 类的 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4480709/