html - 如何根据您所在的页面更改导航栏中超链接的颜色？

Question

对于这个例子，让我们假设一个导航栏包含以下元素：

cats - dogs - sheep - cows

我想这样做，所以如果你在cats页面上，cats文本是红色的，但其余的保持白色，如果你在dogs页面上然后dogs变成蓝色等等？

Answer 1

创建一个类（比如.active）并将其分配给每个页面上的活动标签（猫标签将获得猫页面上的活动类）。您的代码如下所示：

HTML

<a class="active">cats</a>
<a href="dogs.html">dogs</a>
<a href="sheep.html">sheep</a>
<a href="cows.html">cows</a>

CSS

a {
    color: white;
}

a.active {
    color: red;
}

编辑：如果您希望每个活动页面都有不同的颜色，您也可以使用我们的内联 CSS。

<a style="color:red">cats</a>
<a href="dogs.html">dogs</a>
<a href="sheep.html">sheep</a>
<a href="cows.html">cows</a>