Использование свойства CSS для href для файла

У меня есть этот HTML из двух якорных тегов, один для файла и один для google

<a href="#" onclick="location.href='http://example.com/files/foobar.csv'; return false;">
    http://example.com/files/foobar.csv
</a>
<a href="#" onclick="location.href='http://google.com'; return false;">
    Google
</a>

У меня также есть этот CSS, чтобы сделать посещенные теги привязки красными.

a:visited {
    color: #ff0000;
}

Когда я нажимаю ссылку google, ссылка становится красной, как ожидалось, потому что я ее посетил.

Когда я нажимаю на файл, ссылка не становится красной.

Таким образом, кажется, что пути к файлам работают иначе, чем пути URL.

Как получить свойство посещения, работающее с тегами привязки с href, в файл

Ответ 1

Не могли бы вы попытаться вставить URL-адрес непосредственно в историю браузера.

Вы можете сделать что-то вроде:

HTML:

$(".file-link").click( function () {
  $(this).attr("href");
  var stateObj = { foo: "bar" };
  window.history.pushState({ title: "Services" }, "foobar.csv", $(this).attr("href"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#/files/foobar.csv" class="file-link">
    http://example.com/files/foobar.csv
</a>
<a href="http://google.com">
    Google
</a>

Ответ 2

Хороший ответ также приведен здесь: текстовое оформление не работает для посещенной ссылки.

Вы можете сделать это с помощью jquery addClass.

Демо-код

$('a').click(function(){
    $(this).addClass('visited');
});

CSS

.visited {
  color: green;
  text-decoration: line-through;
}

демонстрация скрипки: https://jsfiddle.net/nikhilvkd/7y2fyytw/

Ответ 3

Сейчас у меня есть 2 теории с этим.

Ссылка, которую вы там помещаете, не является ссылкой, это путь к файлу. Тем не менее, я попытался загрузить этот рис, где он находится на сервере pexels.com cat pic. :visited psuedo работает нормально.
Вторая ваша ссылка не активна или не существует/нет. исправьте. Потому что, когда я пробовал эту работу,

a:link {
color: #222;
text-decoration: none;
}
a:visited {
color: red;
}

<a href="#" onclick="location.href='http://example.com'; return false;">
    http://example.com
</a>

<br>
<br>
<a href="#" onclick="location.href='http://google.com'; return false;">
    Google
</a>