Изменение цвета текста ссылки HTML после открытия в новой вкладке?

Question

Я работаю над проектом Asp.net (C #), у меня есть html-ссылка на моей странице Dashboard.aspx, которую пользователь может открыть в новой вкладке, и я хочу изменить цвет текста ссылки после того, как пользователь щелкнул его или открыл в новой вкладке, Подробнее:

По моему 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

Вам просто нужно удалить встроенный стиль из элемента 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>

Answer 2

Проблема в том, что вы изначально устанавливаете цвет с помощью встроенного стиля, и единственное, что может переопределить встроенный стиль, - это директива !important, которую вы не должны использовать в любом случае.

Причина, по которой я хочу это сделать: после того, как пользователь заходит по этой ссылке и возвращается на Dashboard.aspx, чтобы просмотреть больше ссылок, он сможет определить, какие ссылки он уже посетил - те, с красным цвет.

Это произойдет без вашего участия, потому что все браузерные ссылки цветового кода основаны на том, находится ли URL, на который они указывают, в истории браузера (иными словами, вы уже были там). Конечно, вы можете настроить цвета и другие стили, которые применяются со стандартными псевдоклассами CSS:

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

Но, если вы хотите иметь более детальный контроль, просто установите два класса - один для начального просмотра и один для последующего просмотра. Затем просто используйте JS, чтобы поменять классы с API-элементом .classList элемента DOM.

Вот пример:

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>