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

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

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>

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

下面是我想做的一个例子：

---

在主页（即公文包）上，导航菜单中的“公文包”与页面上的颜色保持相同。如何执行此操作？

创建一个

。选定的
类，并将其应用于当前页面。让它覆盖你想要的颜色

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>

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

#nav{文本对齐：居中；文本装饰：无；页边距顶部：20px；填充顶部：31px；}
#导航a{文本装饰：无；颜色：#FFFFFF；字体系列：maven；边框底部：#FFFFFF 2px实心；填充底部：5px；字体大小：20px；}
#导航a:悬停{文本装饰：无；颜色：#ff6464；边框底部：#ff6464 2px实心；}
#nav a.selected{color:#ff6464；}/*我不知道为什么在这里没有为所有页面应用样式表的情况下为它们分配类（我在这里删除它们，如果您在其他用途中使用它们，请忽略）。正如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>

更新：

在您的公文包页面中：

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


但这会使它无论如何都突出显示吗？当我说到“关于”时，“主页”仍然突出显示。是的。现在，您需要将“selected”类应用于每个页面的正确元素。您已经将您的问题标记为
html
和
css
，除此之外没有提供更多信息。我不知道你是如何服务这些网页的，没有人知道，所以我们不能帮助你更多。如果您使用的是模板系统，则需要动态设置当前页面链接的类。如果您使用的是静态HTML，那么您需要手动为每个页面设置。是的，但是当他们转到“关于”页面时，公文包仍然会突出显示。嗯，这很简单。在“公文包”页面上，您分配了“选定”类，在“关于”页面上，您分配了“选定”类，并从公文包中删除了“选定”类。请参阅我的更新。