jQuery的不改變所選菜單項的文字顏色

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

將突出顯示類別添加到中，以便突出顯示文本。

要么

li.highlight a{
    color: orange;
}

Answer 3

我將您的代碼添加到JS小提琴中： http : //jsfiddle.net/grammar/ttk4qkze/

問題出在鏈接的默認瀏覽器樣式上。 您的CSS僅以highlight類別（在這種情況下為<li> 。 <a>不會自動從其父項繼承color屬性，因此您必須自己進行設置。

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

另外，我認為您不需要第二個each()循環。 <li>元素的parents()永遠不會是另一個<li> 。

Answer 4

為跨度設置一個類，其中將包含菜單項文本，然后在選擇菜單項時使用“：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>