爲什麼CSS：活動鏈接不會使當前頁面鏈接高亮顯示？

Question

下面我有下面的代碼清單到母版頁

<div id="header"> 
      <ul> 
       <li><a href="default.aspx">Home</a></li> 
       <li><a href="page1.aspx">Page1</a></li> 

      </ul> 
     </div>  ​ 

與CSS

#header a:hover { 
    color: #AA1111; 
    border-color: #AA1111; 
} 

#header a:active { 
    color: #AA1111; 
    border-color:#AA1111; 
} 

但是當頁面已在工作環節不與顏色來突出顯示。

Answer 1

:active並不表明在當前頁面激活鏈接將被高亮顯示。

:active是鼠標點擊鼠標在鏈接上發佈之間的鏈路的狀態。嘗試將鼠標放在鏈接上以便自己查看。

要設置不同的風格，你要麼需要給當前頁面的鏈接不同的類，並針對該類在你的CSS當前頁面的鏈接。

如果您使用.NET，我建議使用具有指定當前頁面菜單鏈接類的選項不同的CSS菜單適配器/列表控件。

Answer 2

我想你是混淆了僞選擇器:active的含義。該CSS規則將適用於你點擊鏈接。但是，如果該鏈接將您帶到新頁面，則錨點不再處於活動狀態。

你需要做的是向錨點中添加一個類，具體取決於你在哪個頁面上。所以，在default.aspx中，你需要確保你有<a class="active" href="default.aspx">Home</a>。然後，您需要將您的css規則更改爲#header a.active。

Answer 3

你可能想設置你的頁面的方式：

#header li {} 
#header li.active a {color: #AA1111; border-color:#AA1111;} 


<div id="header"> 
     <ul> 
      <li class="active"><a href="default.aspx">Home</a></li> 
      <li><a href="page1.aspx">Page1</a></li> 

     </ul> 
</div> 

您需要在此基礎上頁面設置上li活動類。

演示：http://jsfiddle.net/lucuma/HT4U4/