Question

假设我有一个带有少量链接的导航栏的基本网站。当我在页面上（例如，使用条款）时，我希望突出显示导航栏中的“使用条款”链接。当我切换到另一个页面时，我希望突出显示该页面的链接（即我切换到隐私页面，然后在导航栏中突出显示“隐私”）。

有没有人知道用HTML / CSS / JS做这个的简单方法？

Answer 1

在不使用javascript或php等的情况下执行此操作的简单方法是在每个页面上为body标签添加不同的类。

<body class="nav-1-on">

然后在你的css文件中：

body.nav-1-on a.nav-1, body.nav-2-on a.nav-2  { color:red )

因此，您需要XXX类，因为您拥有的导航项目很多，并且您也会在每个导航项目上放置一个类，如图所示。

有意义吗？

Answer 2

更新（大脑褪色，选择错误）。对于CSS3浏览器，您可以轻松地定位页面名称：

a[href*=pageNameImOn.htm] {color: red;}

此处*=将匹配其中包含pageNameImOn.htm的所有href路径，这些路径将匹配：

<a href="/my/path/to/file/pageNameImOn.htm">
<a href="/pageNameImOn.htm">
<a href="/pageNameImOn.htm#interalJumpLink">

Answer 3

对于您想要成为其他颜色的链接，您可以手动设置样式

<a style="color:red">My link is red</a>

可能更好的方法是定义颜色为红色的类

<style> .visited { color:red } </style>

然后是实际链接

<a class="visited">My red link</a>

Answer 4

此解决方案使用jQuery，jQuery只是javascript的编译代码库，提供易于使用的代码段和功能。

这绝对是实现您所追求目标的最简单方法，虽然它是“客户端”，因此该类将由用户计算机添加，而不是由服务器添加，然后发送给用户。但对于较小的网站，它应该足够了。

正在发生的事情：此代码会找到您的导航，此处正在查找li的{{1}}，因此请将（.nav'）替换为您调用的菜单类，所以可能：.nav li。然后它会看到菜单链接是否与当前页面匹配，如果匹配，则会向li添加一个类。因此，您还需要创建一个('.mymenu li')类，例如：.active

希望这有帮助！

.active{background-color:blue;}

Answer 5

只为了它的乐趣。如果只有Single page和CSS3解决方案，没有任何后端代码或Javascript：

<ul>
     <li><a id="home" href="#home">Home</a></li>
     <li><a id="terms" href="#terms">Terms of use</a></li>
</ul>

CSS

 li a { color: black; }     
 #home:target { color: red; }     
 #terms:target { color: red; }

CSS中的:target选择器将匹配与当前哈希标记匹配的ID选择器。以下是一些更多信息：http://reference.sitepoint.com/css/pseudoclass-target

Firefox，Safari，Opera和Chrome中的相当不错的支持。

IE9和IE10中的不完整支持：

IE不会对“后退”和“前进”按钮做出反应：该元素根本不应用或删除伪类。 http://www.quirksmode.org/css/contents.html

Answer 6

在您的身体上设置不同的ID以识别该页面。

<body id="terms-of-use">

示例导航：

<nav>
 <a class="home" href="#">Home</a>
 <a class="terms-of-use" href="#">Terms</a>
</nav>

然后在你的CSS中：

nav a {
  // default style
  background: blue;
}

#terms-of-use a.terms-of-use {
 // if the id of body is terms-of-use then the link with the class .terms-of-use...
 background: red;
}

如何在主导航中以不同方式设置当前页面的样式？

6 个答案: