我需要爲一個頁面創建一個導航菜單

我需要一個我正在創建的頁面的導航菜單，我想在有人點擊它時更改活動鏈接。我在活動鏈接上已經有了樣式，但我不知道如何改變它。有人在盤旋時發生變化也會很好。 Javascript是沒問題的。謝謝。我需要爲一個頁面創建一個導航菜單

菜單

<div class="row"> 
    <div class="small-12 medium-12 large-3 columns"> 
     <a class="logo" href="/">Saul Designs</a> 
    </div> 

    <div class="large-7 columns"> 
     <nav class="main-nav show-for-large-up"> 
      <ul> 
<!-- below this is what i need to have change--> 

            <li><a class="active" href="#start">START</a></li> 
       <li><a href="#about">ABOUT</a></li> 
       <li><a href="#work" >WORK</a></li> 
       <li><a href="#contact">CONTACT</a></li> 

    <!-- and above this --> 
      </ul> 
     </nav> 
    </div> 

    <div class="large-2 columns"> 
     <div class="normal-button alternate show-for-large-up"> 
      <a href="mailto:[email protected]">HIRE ME</a> 
     </div> 
    </div> 
</div>

來源

2014-04-13 saulpm

可能對您有幫助嗎？ http://stackoverflow.com/questions/20767161/keep-link-active-after-clicked-using-same-page-anchors –

可以在CSS3使用錨造型的東西。這裏的問題是你必須爲每個錨點指定匹配的id。

所以，你必須寫：

<li><a id="start" href="#start">START</a></li> 
<li><a id="about" href="#about">ABOUT</a></li> 
<li><a id="work" href="#work" >WORK</a></li> 
<li><a id="contact" href="#contact">CONTACT</a></li>

然後，你必須添加4個stylerules，太：

#start:target, #about:target, #work:target, #contact:target{ 
    background:#555; /* or as you want... */ 
}

這樣，它應該沒有任何額外的JavaScript運行。我不喜歡這種方式，因爲您必須指定每個ID，並且您正在污染css空間。但我不知道另一種方式只使用HTML和CSS。

來源

2014-04-13 20:46:41 Fuzzyma

我需要爲一個頁面創建一個導航菜單

回答

相關問題