突出顯示活動導航菜單，背景顏色：#fff作品和顏色：#fff不工作？

我正在使用我在論壇中看到的示例來突出顯示當前的導航菜單。突出顯示活動導航菜單，背景顏色：#fff作品和顏色：#fff不工作？

我可以做我的活動導航菜單有background-color:#fff例如，但我沒有成功做color:#fff。爲什麼background-color:#fff工作和color:#fff不？

我的HTML：

<section id="menu-container"> 
    <nav id="menu"> 
     <ul> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      > 
     </ul> 
    </nav> 
</section>

腳本的jQuery：

<script type ="text/javascript"> 
$(function(){ 

    var url = window.location.href; 

    $("#menu ul li a").each(function() { 

     if(url == (this.href)) { 
      $(this).closest("li").addClass("active"); 
     } 
    }); 
});   
</script>

的CSS：

.active{ 
    color:#FFF; 
}

我的整個CSS：

#menu-container{background:#243138; width:100%; height:62px;float:left; margin-top:15px; border-top: 4px solid #63F;} 
#menu{width:960px; height:auto; margin:0 auto 0 auto;} 
#menu ul{list-style-type:none;} 
#menu ul li{float:left; height:62px; line-height:62px; font-size:20px; font-family:'bariol_regularregular';} 
#menu ul li a{text-decoration:none; margin-right:5px; color:#ccc; display:block; height:62px; line-height:62px;padding:0 5px 0 5px; } 
#menu ul li a:hover{color:#fff;} 

active { color:#fff; }

來源

2014-03-05 John23

因爲錨標記可能在CSS中爲其分配了顏色。您可以更新您的CSS，包括以下內容：

li.active a { color:#fff; }

來源

2014-03-05 03:34:54 Sam

謝謝，但仍然不工作！我已經做了一些與我的其他CSS的經驗，不工作，只是背景色的作品。我用我的css更新了這篇文章。我試圖把#menu ul li沒有顏色：#ccc，但仍然不工作。這很奇怪！ – John23

可能是一個級聯問題。可能需要更具體。試試'#menu ul li.active a {color：#fff; }' – Sam

這就是它，謝謝！我認爲，因爲這一行$（this）.closest（「li」）。addClass（「active」）; ，我們正在用href = url向li添加一個類.active，我認爲在css中我們只能使用.active！ – John23

，或者您需要類添加到同一超級鏈接

檢查jsfiddle

記得我已經申請了在document.ready（）所以你必須點擊運行按鈕在jsfiddle左上角，然後只有你會看到家超鏈接的活動類效果

$("#menu ul li a").each(function() {  
     if(url == (this.href)) { 
      //$(this).addClass("active"); 
      $(this).addClass("active"); 
     } 
});

來源

2014-03-05 03:39:14

「顏色」定義文本的顏色，它看起來像你想改變一些元素的背景顏色。所以「背景色」屬性是合適的。

如果你願意，你可以檢查出來here

，也許加：

<div style="color:red; width:100px; height:100px; background-color:blue"> 
    <p> Hello </p> 
</div>

所以你可以看到它是如何工作:)

希望它有助於

來源

2014-03-05 03:39:16 tupini07

謝謝，但我真的只想將文本顏色更改爲白色，我將文本顏色改爲黑色，並且我想將白色添加到當前的導航菜單中！ – John23

突出顯示活動導航菜單，背景顏色：#fff作品和顏色：#fff不工作？

回答

相關問題