1

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

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，只要您在该页面上。我该怎么做呢？

4

2 回答 2

2

创建一个.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! */
于 2013-05-15T02:41:29.230 回答
0

我不确定为什么在此处没有为所有页面应用样式表时将类分配给此处的所有页面（我在此处将其删除，如果您将它们用于其他目的，请忽略这一点）。正如 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>
于 2013-05-15T03:00:21.493 回答