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

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

html css

Html 单击其他超链接时更改超链接颜色,html,css,href,Html,Css,Href,单击其他链接时，如何将超链接颜色更改回原始颜色？超链接位于同一页面上请检查此从上面的示例中，您可以看到，单击苹果，然后单击葡萄/香蕉。。这两种颜色因（访问）而变得相同。如何在单击任何链接时使其仅为一种颜色（绿色）您可以使用jQuery $（'body a:link'）。单击（function（） { $（'body a'）。removeClass（'active'）； $（this.addClass（'active'）； }); a:link{ 颜色：蓝色； } /*访问链接*/ a、活

单击其他链接时，如何将超链接颜色更改回原始颜色？超链接位于同一页面上

请检查此

从上面的示例中，您可以看到，单击苹果，然后单击葡萄/香蕉。。这两种颜色因（访问）而变得相同。如何在单击任何链接时使其仅为一种颜色（绿色）

您可以使用

jQuery

$（'body a:link'）。单击（function（）
{
$（'body a'）。removeClass（'active'）；
$（this.addClass（'active'）；
});
a:link{
颜色：蓝色；
}
/*访问链接*/
a、 活跃的{
颜色：绿色；
}
/*鼠标悬停链接*/
a:悬停{
颜色：红色；
}

苹果在这里
葡萄
香蕉此处
定义所有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>

最后，让我们调整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; }



您可以看到所有这些都在起作用。

试试这个（复制并粘贴）：
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>

您可以使用a:active{color:green}
并在访问时保持蓝色您不能完全使用CSS来实现这一点，如果您将目标重定向为与单击的元素相同，您将获得最好的效果，尽管您失去了移动到目标位置的功能。否则您需要使用JavaScript。除了jquery之外，还有其他方法吗？我认为在CSS中没有比jquery更好的解决方案，但在CSS：active
和：focus选择器中，我们得到了有限的解决方案。
<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>

a:link{
 color:blue;
}

a:visited{
 color:purple;
}

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

a:active{
 color:red;
}

a:active{
 color:yellow;
}