在新选项卡中打开后更改html链接的文本颜色？答案

【问题标题】：Changing text color of an html link after opened in new tab?在新选项卡中打开后更改html链接的文本颜色？
【发布时间】：2019-02-07 21:05:07
【问题描述】：

我正在处理我的 Asp.net (C#) 项目，我的 Dashboard.aspx 页面中有一个 html 链接，用户可以在新选项卡中打开它，我想在之后更改链接的文本颜色用户单击它或在新选项卡中打开它，更多详细信息：

在我的Dashboard.aspx：

<a href="~/SomePage.aspx" id="link" runat="server" style="color: blue;"></a>

我想在用户单击它或在新标签页中打开它后将此链接的文本颜色更改为red，我试过这个：

<a href="~/SomePage.aspx" id="link" runat="server" onclick="Clicked()" style="color: blue;"></a>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function Clicked() {
        document.getElementById("link").style.color = "red";
    }
</script>

但它仅在我单击链接时有效（左键单击鼠标），当我单击鼠标右键并在新选项卡上打开它时什么也不做，我的意思是：我想要颜色在用户在新选项卡中打开链接后更改（通常：在用户浏览链接后），我该怎么做？

我想这样做的原因是：用户访问此链接并返回Dashboard.aspx 浏览更多链接后，他将能够识别他已经访问过哪些链接 - 那些带有红色的链接。

有什么建议吗？

提前致谢！！

【问题讨论】：

标签： javascript c# asp.net html css

【解决方案1】：

问题是您最初通过内联样式设置颜色，唯一可以覆盖内联样式的是 !important 指令，无论如何您都不应该使用它。

我想这样做的原因是：用户访问此链接后返回 Dashboard.aspx 浏览更多链接，他将能够确定他已经访问过哪些链接 - 那些带有红色的颜色。

这将在您没有参与的情况下发生，因为所有浏览器都会根据它们指向的 URL 是否在浏览器的历史记录中对链接进行颜色编码（换句话说，您已经去过那里）。您当然可以自定义使用标准 CSS 伪类应用的颜色和其他样式：

a:link    { color:blue; }  /* Unvisited link color */
a:visited { color:red; }  /* Visited link color */

但是，如果您想进行更精细的控制，只需设置两个类 - 一个用于初始外观，一个用于后期外观。然后只需使用 JS 将类与 DOM 元素的 .classList API 交换即可。

这是一个例子：

document.querySelector("p").addEventListener("click", function(){
  this.classList.remove("before");
  this.classList.add("after");
});

.before { color:red; }
.after { color:blue; }

&lt;p class="before"&gt;Click me&lt;/p&gt;

【讨论】：

【解决方案2】：

您只需要从a 元素中删除内联样式，然后在css 中添加您的样式，因为就像@Scott Marcus 所说，内联样式优先于css 样式。所以为普通链接（未访问）添加样式并为访问链接添加样式:visited。运行下面的sn -p，如果你还没有访问过code.org，链接是蓝色的，否则是红色的。

要访问该链接，请右键单击并单击“在新选项卡中打开”（chrome），因为只是单击并没有打开 sn-p 中的链接。

a#link {
  color: blue;
}

a#link:visited {
  color: red;
}

&lt;a href="https://code.org" target="_blank" id="link"&gt;Link&lt;/a&gt;

【讨论】：