我需要为一个页面创建一个导航菜单

我需要一个我正在创建的页面的导航菜单，我想在有人点击它时更改活动链接。我在活动链接上已经有了样式，但我不知道如何改变它。有人在盘旋时发生变化也会很好。 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

我需要为一个页面创建一个导航菜单

回答

相关问题