Question

我正在处理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以浏览更多链接后，他将能够确定他已经访问了哪些链接-红色。

有什么建议吗？

提前谢谢！

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

<p class="before">Click me</p>

Answer 2

您只需要从a元素中删除内联样式，然后在CSS中添加样式，因为就像@Scott Marcus所说的那样，内联样式的优先级高于CSS样式。因此，为普通链接（未访问）添加样式，并为访问链接:visited添加样式。运行以下代码段，如果您尚未访问code.org，则该链接为蓝色，否则为红色。

要访问该链接，请右键单击该链接，然后单击“在新标签页中打开”（chrome），因为仅单击并没有打开代码段中的链接。

a#link {
  color: blue;
}

a#link:visited {
  color: red;
}

<a href="https://code.org" target="_blank" id="link">Link</a>

在新标签页中打开后更改html链接的文本颜色？

2 个答案: