导航菜单突出显示活动页面？答案

【问题标题】：nav menu highlighted the active page?导航菜单突出显示活动页面？
【发布时间】：2013-05-15 12:58:14
【问题描述】：

我的导航菜单中有三个选项。投资组合、关于和联系方式。这是它的标记。

HTML

<div id="nav">
 <a class="homePage" href="/index/0-1">Portfolio</a>
 <a class="aboutPage" href="/index/0-2">About</a>
 <a class="contactPage" href="/index/0-3">Contact</a>
 </div>

CSS

#nav {
   text-align: center; 
   text-decoration: none; 
   margin-top: 20px; 
   padding-top: 31px;
}
#nav a {
   text-decoration: none; 
   color: #FFFFFF; 
   font-family: maven; 
   border-bottom: #FFFFFF 2px solid; 
   padding-bottom: 5px; 
   font-size:20px;
}
#nav a:hover {
   text-decoration: none; 
   color: #ff6464; 
   border-bottom: #ff6464 2px solid;
}

现在这是我想做的一个例子：

在主页（即投资组合）上，导航菜单中的“投资组合”将保持颜色 #ff6464，只要您在该页面上。我该怎么做呢？

【问题讨论】：

stackoverflow.com/questions/9767289/…

标签： html css

【解决方案1】：

创建一个.selected 类并将其应用到当前页面。让它覆盖你想要的颜色。

HTML

<div id="nav">
 <!-- add a new class to portfolio/whatever the current page is -->
 <a class="homePage selected" href="/index/0-1">Portfolio</a>
 <a class="aboutPage" href="/index/0-2">About</a>
 <a class="contactPage" href="/index/0-3">Contact</a>
 </div>

CSS

#nav {text-align:center; text-decoration:none; margin-top:20px; padding-top: 31px;}
#nav a {text-decoration:none; color:#FFFFFF; font-family:maven; border-bottom:#FFFFFF 2px solid; padding-bottom:5px; font-size:20px;}
#nav a:hover {text-decoration:none; color: #ff6464; border-bottom: #ff6464 2px solid;}
#nav a.selected {color: #ff6464;} /* <---- new style! */

【讨论】：

但这让它无论如何都突出显示？当我进入“关于”时，“主页”仍然突出显示。
是的。您现在需要将“选定”类应用于每个页面的正确元素。您已将您的问题标记为html 和css，除此之外没有提供更多信息。我不知道您如何为这些页面提供服务，没有人知道，所以我们无法为您提供更多帮助。如果您使用的是模板系统，那么您需要动态设置当前页面链接的类。如果您使用的是静态 HTML，那么您需要手动为每个页面设置它。

【解决方案2】：

我不确定为什么在此处没有为所有页面应用样式表时为它们分配类（我在这里删除它们，如果您将它们用于其他目的，请忽略这一点）。正如 ByteBlast 和 Jace 所回答的那样，您可以为该活动页面分配一个类。所以你的 HTML 可能是：

<div id="nav">
   <a class="selected" href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

那么您的 CSS 将是（通过删除不必要的样式）：

#nav {
   text-align: center; 
   margin-top: 20px; 
   padding-top: 31px;
}
#nav a {
   text-decoration: none; 
   color: #FFFFFF; 
   font-family: maven; 
   border-bottom: #FFFFFF 2px solid; 
   padding-bottom: 5px; 
   font-size:20px;
}
#nav a:hover {
   color: #ff6464; 
   border-bottom: #ff6464 2px solid;
}
#nav a.selected {
   color: #ff6464;
}

更新：

在您的投资组合页面中：

<div id="nav">
   <a class="selected" href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

在您的“关于”页面中

<div id="nav">
   <a href="/index/0-1">Portfolio</a>
   <a class="selected" href="/index/0-2">About</a>
   <a href="/index/0-3">Contact</a>
</div>

在您的联系页面中

<div id="nav">
   <a href="/index/0-1">Portfolio</a>
   <a href="/index/0-2">About</a>
   <a class="selected" href="/index/0-3">Contact</a>
</div>

【讨论】：

是的，但是当他们转到 about Page 时，Portfolio 仍然会突出显示。
嗯，这很容易。在 Portfolio 页面上，您分配了“已选择”类，在“关于”页面中，您分配了“已选择”类并从投资组合中删除了“已选择”类。请参阅我的更新。