突出顯示當前頁面菜單li

有沒有辦法讓我根據頁面ID突出顯示菜單li？我似乎無法找到一種方法來做到這一點。突出顯示當前頁面菜單li

http://www.dawaf.co.uk/cthm/work/

<div id="header"> 
    <h1> 
     <a href="http://www.dawaf.co.uk/cthm/work"> 
      <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/logo2.png" alt="CTHM Logo" id="logo" width="140" height="44" />  
     </a> 
     <div id="contact-details"> 
      26 Queen Anne Road, London, E9 7AH<br /> 
      t + 44 7912325101<br /> 
      <a href="mailto:[email protected]">[email protected]</a> 
     </div> 
    </h1> 
    <div id="nav"> 
     <span id="nav-li"> 
      <a href="http://www.dawaf.co.uk/cthm/work/" class="work-current">Work</a> 
      <a href="http://www.dawaf.co.uk/cthm/studio/" class="studio-current">Studio</a> 
      <a href="http://cthmplus.tumblr.com/" target="_blank">CTHM&#43;</a> 
      <a href="https://twitter.com/hello_cthm" target="_blank"> 
       <img src="http://www.dawaf.co.uk/cthm/wp-content/uploads/2013/01/twitter.png" alt="Twitter" width="13" height="13"> 
      </a> 
     </span> 
    </div> 
</div> 

<div id="content">

來源

2013-01-24 user1652997

您首先需要爲顯示的錨點指定一個「活動頁面」類。例如，您可以使用'.activepage {color：green;}'的樣式。 – Omega

我建議加入活性類的導航項目。事情是這樣的：

<a href="http://www.dawaf.co.uk/cthm/work/" class="active">Work</a>

然後是CSS：

#nav a.active { 
    /* your active style here */ 
}

來源

2013-01-24 00:32:03 zakangelle

然後，我如何區分「工作」和「工作室」頁面處於活動狀態？我需要使用頁面ID嗎？ – user1652997

理想情況下，您希望在構建頁面時在服務器端添加活動類。如果這不是一個選項，你可以用這樣的jQuery來實現：'$（「＃nav」）。find（「a [href ='」+ window.location.href +「'」）。addClass（「active」）;' – zakangelle

你有兩個選擇。其中之一就是Zak提到的，因此您需要使用jQuery來爲您的網站一次只標記一個項目爲「活動」。另一個選項是CSS：活動選擇器，它將自動將CSS應用於正在使用的鏈接（目前）。例如：

#nav li a:active { 
    /* Insert styling here, such as, background-color: #01B */ 
}

讓我知道這是否有幫助！

來源

2013-01-24 01:14:29

突出顯示當前頁面菜單li

回答

相關問題