[英]jquery not changing the selected menu item text color
i added jquery to change selected menu item color when selected,the jquery changes the background color of the item perfectly but it does not change the color of the text /. 我添加了jquery来更改选中的菜单项的颜色,jquery会完美地更改该项的背景颜色,但不会更改文本/的颜色。 following is my html and jquery and css:
以下是我的html,jquery和CSS:
css: CSS:
.highlight
{
color:orange;
}
HTML: 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: 脚本:
<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>
please help me to solve this problem,thank you 请帮我解决这个问题,谢谢
.highlight a span
{
color:orange;
}
Just add anchor tag in css. 只需在CSS中添加锚标签即可。 Because always anchor tag takes higher priority with its default blue color.
因为始终锚标记具有默认的蓝色优先级较高。
.highlight a
{
color:orange;
}
Add your highlight class to a so that text will be highlighted. 将突出显示类别添加到中,以便突出显示文本。
or 要么
li.highlight a{
color: orange;
}
I added your code to a JS fiddle: http://jsfiddle.net/grammar/ttk4qkze/ 我将您的代码添加到JS小提琴中: http : //jsfiddle.net/grammar/ttk4qkze/
The problem lies in the default browser styles for links. 问题出在链接的默认浏览器样式上。 Your CSS only targets the items with a class of
highlight
, which in this case is the <li>
. 您的CSS仅以
highlight
类别(在这种情况下为<li>
。 The <a>
will not inherit the color property from its parent automatically, so you have to set it yourself. <a>
不会自动从其父项继承color属性,因此您必须自己进行设置。
.highlight,
.highlight a {
color: orange;
}
Additionally, I don't think you need the second each()
loop. 另外,我认为您不需要第二个
each()
循环。 parents()
of the <li>
element will never be another <li>
. <li>
元素的parents()
永远不会是另一个<li>
。
set a class for span which will contain the menu item text, then use ":active" css state selector to set the styles when selected a menu item 为跨度设置一个类,其中将包含菜单项文本,然后在选择菜单项时使用“:active” css状态选择器设置样式
.menu_item_txt:active{
color: red;
}
<ul id="navBar">
<li class="highlight"><a href="aboutus.aspx"><span class="menu_item_txt">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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.