2010-08-20 91 views
0

簡單地說,我想實現一些我們在堆棧溢出頂部導航器中的活動按鈕的顏色是不同的,但只使用CSS NOT JavaScript?鏈接按鈕更改爲CSS?

但是a:active似乎沒有按預期工作。 我看到一些很常見的例子,這是通過將類分配給來自服務器或客戶端的標記中的活動元素來完成的。這可能只使用CSS?

<HTML> 
    <HEAD> 
     <TITLE>Its Nav</TITLE> 
     <STYLE type="text/css"> 
      div { 
       width:200; 
      } 
      ul { 
       list-style:none; 
      } 
      ul li a { 
       padding:2 4 2 4; 
       border:1px solid blue; 
       display:block; 
       text-decoration:none; 
      } 
      ul li a:active { 
       color:green; 
      } 
      ul li a:hover { 
       color:red; 
      }   
      ul li a:link { 
       color:gray; 
      } 
     </STYLE> 
    </HEAD> 
    <BODY> 
    <div> 
     <ul> 
      <li><a href="#" >link one</a></li> 
      <li><a href="#" >link two</a></li> 
      <li><a href="#" >link three</a></li> 
      <li><a href="#" >link four</a></li> 
      <li><a href="#" >link five</a></li> 
      <li><a href="#" >link six</a></li> 
      <li><a href="#" >link seven</a></li> 
      <li><a href="#" >link eight</a></li> 
      <li><a href="#" >link nine</a></li> 
      <li><a href="#" >link ten</a></li> 
     </ul> 
    <div> 
    </BODY> 
</HTML> 
+2

發佈您的代碼? – 2010-08-20 08:53:44

+0

無需爲此使用JavaScript。可能是另一個屬性重疊,或者你的CSS有問題。所以,正如邁克爾羅賓遜所說,最好的辦法是在這裏發佈一些代碼,或者更好地作爲jsbin.com – Sotiris 2010-08-20 10:42:45

+0

上的一個實例。如果你想正確使用CSS,你應該包括一個文檔類型,就像這樣:'<!DOCTYPE HTML>'。 – 2011-04-06 16:26:39

回答

0

如果我明白你想要做什麼,使用a:active將無濟於事。 css僞類激活顯示鏈接被點擊的時間(恰好當它被點擊並且在下一頁加載之前)。之後,它改變訪問。

編輯:我沒有看到你首先想要一個專門的CSS解決方案。我相信你所需要的是以前已經回答的問題。請檢查How to set a active link as default when page first time load,看看它是否有幫助:)

既然您不想使用JavaScript解決方案,我建議您在導航欄中爲活動<li>標記創建一個新類。您可以動態地(例如使用php)或手動爲html中的每個頁面執行此操作。

正如其他人已經評論過的,如果您發佈了代碼,那麼給您一個可以直接應用的答案會更容易。