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

Question

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

cats - dogs - sheep - cows

如果你在 cats 上，我想做到这一点页面，cats如果您在 dogs 上，文本是红色的，但其余部分保持白色然后页面 dogs变蓝等等？

Answer 1

创建一个类(例如 .active)并将其分配给每个页面上的 active 标签(cat 标签将获得 cats 页面上的 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>