单击其他超链接时更改超链接颜色

Question

当点击其他链接时，如何将我的超链接颜色改回原来的颜色？超链接定位在同一页面上。

请查看DEMO

从上面的例子你可以看到，当点击苹果然后点击葡萄/香蕉..两者都变成了相同的颜色，因为（访问过）。单击任何链接时如何使其仅显示一种颜色（绿色）

Answer 1

当您定义所有 4 种状态时，您应该按以下顺序定义它们：

1. 链接
2. 已访问
3. 悬停
4. 活动

这解决了大约一半的问题。

a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }

另一半，让链接保持颜色，直到你点击其他东西，更难。之前单击的任何内容都没有内置状态，所以让我们制作一个。

首先，我们需要 jQuery，所以让我们导入它（通过 Google）。这在您的 HTML 的头部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>

在 jfiddle 中，您可以通过从左侧下拉列表中选择 jQuery 2.1.4 来添加它。

如果链接是最后点击的链接，我们可以通过提供此 JavaScript 来为链接添加一个类：

$(function(){
    $('a').click(function(){
        $('a.lastclicked').removeClass('lastclicked'); //remove class from previous link
        $(this).addClass('lastclicked'); //add class to newly clicked link
    });
});

最后，让我们调整 CSS 来进行着色：

a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: red; }
a:active { color: green; }
a.lastclicked { color: green; }

如果您也希望将悬停颜色应用于最后点击的链接，则可以添加以下行：

a.lastclicked:hover { color: red; }

您可以在 in a Fiddle here 中看到所有这些。

Answer 2

试试这个（复制和粘贴）：

Test.html:-

<html>
 <link rel="stylesheet" type="text/css" href="style.css">
 <a class="fruit" href="#">apple</a></span>
 <a class="fruit"  href="#">grape</a></span>
 <a class="fruit"  href="#">banana</a></span>
 <div style="height:500px"></div>
 <a name="apple"> apple here</a>
 <a name="grape"> grape here</a>
 <a name="banana"> banana here</a>
</html>

style.css:-

a:link{
 color:blue;
}

a:visited{
 color:purple;
}

a:hover{
 color:orange;
}
a:focus{
color:green;
}

a:active{
 color:red;
}

a:active{
 color:yellow;
}

Answer 3

您可以使用jQuery 来做到这一点

$('body a:link').click(function()
{
	$('body a').removeClass('active');
	$(this).addClass('active');	 
});

a:link {
    color: blue;
}

/* visited link */
a.active {
    color: green;
}

/* mouse over link */
a:hover {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="fruit" href="#apple">apple</a></span>
<a class="fruit"  href="#grape">grape</a></span>
<a class="fruit"  href="#banana">banana</a></span>
<div style="height:500px"></div>
<a name="apple"> apple here</a>
<a name="grape"> grape here</a>
<a name="banana"> banana here</a>