Question

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

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。我该怎么做呢？

Answer 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! */

Answer 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>

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

2 个答案: