Question

我有5个导航链接。我希望它们始终保持黑色文字颜色。当用户点击链接时，我希望它变成不同的颜色。当他们转到另一个链接时，我希望之前的链接再次变为黑色，但是当前的链接会再次变为黑色。基本上，4个链接总是黑色，但当前的链接不同，但我需要将之前的链接更改为黑色。现在，当用户访问我的所有链接后，它们将变成不同的颜色，并且在擦除cookie之前不会再看到黑色。这里有一个例子 - https://www.apple.com。 Apple的导航链接都是白色的，但是当您访问链接时，它会变为灰色，然后当您转到另一个链接时，您刚刚开启的链接会变回白色并且您当前的链接是灰色的。谢谢你的帮助。以下是我的HTML＆amp; CSS：

<nav>
<a href="index.html">Home</a> &nbsp;
<a href="about.html">About</a> &nbsp;
<a href="services.html">Services</a> &nbsp;
<a href="sales.html">For Sale</a> &nbsp;
<a href="contact.html">Contact</a> &nbsp;
</nav>

nav a { text-decoration: none; }

nav a:link { color: #000000; }

nav a:visited { color: #333333; }

nav a:hover { color: #333333; }

Answer 1

我第一眼看到的是你在寻找活跃的链接。也就是说，当前正在使用的链接将是不同的颜色。简单地将它添加到您的CSS并使其成为您需要的任何颜色。

/* selected link */
nav a:active {
    color: blue;
}

然而，这只是在点击链接时更改链接。为了做你需要的东西有点复杂。这已被涵盖here。

基本上你必须在你的css中设置一个活动类，你可以在当前页面的html中调用它。

.navigation a.active {
      color: #333;
}

你的HTML：

<div class="navigation" id="navigation">
    <a href="#" class="active">Page1</a>
    <a href="#">Page2</a>
    <a href="#">Page3</a>
    <a href="#">Page4</a>
    <a href="#">Page5</a>
 </div>

Answer 2

将a：visited属性更改为：{color: #000000}。

导航链接文本颜色1种颜色

2 个答案: