点击其他超链接后更改超链接颜色

Question

点击其他超链接后更改超链接颜色

htmlcsshref

6

当其他链接被点击时，我该如何将超链接颜色更改回原始颜色？这些超链接指向同一页。

请查看此 DEMO

从上面的例子中可以看到，当点击苹果后再点击葡萄/香蕉..两者变成了相同的颜色（因为visited）。如何使它在任何链接被单击时只有一种颜色（绿色）

- user3835327

2

你可以使用 a:active{color:green} 并在访问后保留蓝色。 - Fahad Khan

1

你无法完全使用CSS来实现这个功能，最好的方法是将目标重定向为与单击元素相同。像这样，尽管您会失去移动到目标位置的功能。否则，您需要使用JavaScript。 - Spencer Wieczorek

3个回答

1

当您定义所有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; }

你可以在这里的Fiddle中看到所有的操作演示。

- Sam Pearman

0

请尝试以下代码（复制并粘贴即可）：

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

- Amee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- om_jaipur · Accepted Answer

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