不更改所选菜单项文本颜色的jquery
不更改所选菜单项文本颜色的jquery
提问于 2014-08-22 13:42:22
我添加了jquery来更改选中的菜单项颜色，jquery完美地更改了项目的背景色，但它不改变文本/的颜色。以下是我的html、jquery和css：
css：
.highlight
{
color:orange;
}HTML：
<div class="menuWrapper">
<ul id="navBar">
<li class="highlight"><a href="aboutus.aspx"><span>ABOUT US</span></a></li>
<li><a href="ourwork.aspx"><span>OUR WORK</span></a> </li>
<li><a href='#'><span>CONTACT US</span></a></li>
</ul>
</div>剧本：
<script type="text/javascript">
var str = location.href.toLowerCase();
$("#navBar li a").each(function () {
if (str.indexOf($(this).attr("href").toLowerCase()) > -1) {
$("li.highlight").removeClass("highlight");
$(this).parent().addClass("highlight");
}
});
$("li.highlight").parents().each(function () {
if ($(this).is("li")) {
$(this).addClass("highlight");
}
});
</script>请帮我解决这个问题，谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-08-22 13:48:22
.highlight a span
{
color:orange;
}只需在css中添加锚标记即可。因为始终锚标记具有更高的优先级，其默认的蓝色。
或者只是
.highlight a
{
color:orange;
}Stack Overflow用户
发布于 2014-08-22 13:51:47
将突出显示类添加到a中，以便突出显示文本。
或
li.highlight a{
color: orange;
}Stack Overflow用户
发布于 2014-08-22 13:52:53
我将您的代码添加到JS小提琴：http://jsfiddle.net/grammar/ttk4qkze/中
问题在于链接的默认浏览器样式。您的CSS只针对具有highlight类的项，在本例中是<li>。<a>不会自动继承其父属性的颜色属性，因此您必须自己设置它。
.highlight,
.highlight a {
color: orange;
}此外，我认为您不需要第二个each()循环。parents()的<li>元素永远不会是另一个<li>。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25448474
复制相关文章
相似问题
腾讯云开发者
