时间戳

首页 > 解决方案 > 在新选项卡中打开后更改html链接的文本颜色？

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

问题描述

我正在处理我的 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浏览更多链接后，他将能够识别他已经访问过哪些链接 - 那些带有红色的链接。

有什么建议么？

提前致谢！！

标签： javascriptc#asp.nethtmlcss

解决方案

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

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

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

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

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

这是一个例子：

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>

推荐阅读