Question

我添加了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：

     <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>

请帮我解决这个问题，谢谢

Answer 1

.highlight a span
{
 color:orange;
}

只需在css中添加锚标记即可。因为始终锚标记的默认蓝色优先级较高。

或只是

  .highlight a
{
 color:orange;
}

Answer 2

将您的高亮课程添加到 a ，以便突出显示文字。

或

li.highlight a{
    color: orange;
}

Answer 3

我将你的代码添加到JS小提琴：http://jsfiddle.net/grammar/ttk4qkze/

问题在于链接的默认浏览器样式。您的CSS仅定位类highlight的项目，在本例中为<li>。 <a>不会自动从其父级继承color属性，因此您必须自己设置它。

.highlight,
.highlight a {
  color: orange;
}

此外，我认为您不需要第二个each()循环。 parents()元素的<li>永远不会是另一个<li>。

Answer 4

为span设置一个包含菜单项文本的类，然后使用“：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>

jquery不更改所选菜单项文本颜色

4 个答案:

或只是