Question

如果点击其他链接，如何将超链接颜色更改回原始颜色？超链接的目标是同一页面。

请查看此 DEMO

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

Answer 1

您可以使用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>

Answer 2

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

链接
访问
悬停
有效

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

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

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

首先，我们需要jQuery，所以让我们导入它（通过谷歌）。这是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 3

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

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;
}

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

3 个答案: