如果点击其他链接,如何将超链接颜色更改回原始颜色?超链接的目标是同一页面。
请查看此 DEMO
从上面的例子中你可以看到点击苹果然后点击葡萄/香蕉..两者都变成了相同的颜色,因为(访问过)。单击任何链接时如何使其只有1种颜色(绿色)
答案 0 :(得分:2)
您可以使用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>
答案 1 :(得分: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; }
您可以在 in a Fiddle here 中看到所有这些内容。
答案 2 :(得分: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;
}