Html 单击后如何更改超链接的颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17062608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the color of hyperlink after click it
提问by Kvk Ganesh
I want to change the color of the hyperlink after clicking on it, but remaining hyperlinks color are also changed..
单击后我想更改超链接的颜色,但剩余的超链接颜色也已更改..
CSS
CSS
a:active {
color: gray;
}
a:visited {
color:black;
}
HTML
HTML
<body>
<a href="link1.html">a</a>
<a href="link2.html">b</a>
<a href="link3.html">c</a>
</body>
回答by Greg
The :visited
pseudo-class works on the browser's history. The fact that all three links are being drawn with the black colour means that your browser has visited them in the past. If you were to clear your history, or change the links' urls, you'll find that they aren't classed as 'visited'.
该:visited
伪类适用于浏览器的历史。所有三个链接都用黑色绘制的事实意味着您的浏览器过去曾访问过它们。如果您要清除历史记录或更改链接的 url,您会发现它们并未归类为“已访问”。
A link to StackOverflowwill probably show as visited in your browser, but a link to Voice of JIHADprobably shows up a different colour (unless you are a member of the Taliban). Clicking on the unvisited link will change its colour to the visited colour - as defined in StackOverflow's stylesheets - and will remain 'visited' as long as the page exists in your browser's history.
指向 StackOverflow的链接可能会在您的浏览器中显示为已访问,但指向“圣战之声”的链接可能会显示不同的颜色(除非您是塔利班成员)。单击未访问的链接会将其颜色更改为已访问的颜色(如 StackOverflow 的样式表中所定义),并且只要该页面存在于浏览器的历史记录中,就会保持“已访问”状态。
回答by lazyprogrammer
Ok, so now you know that :visited
works from the browser history, and I think you want to change the color of the clicked link only.
I put some jQuery together
好的,现在您知道:visited
浏览器历史记录有效,我认为您只想更改单击链接的颜色。我把一些 jQuery 放在一起
$('a').click(function(){
$(this).addClass("visited");
});
and the CSS
和 CSS
a{
color:#000;
text-decoration:none;
}
a.visited{
color:#205081;
}
Update:
更新:
....
....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>// import jQuery
<script>
enter the script here..
</script>
</body>
here is the fiddle
这是小提琴