Улучшение пользовательского опыта: методы подчеркивания текста в тегах привязки при нажатии - Fcodenotes

Метод 1: использование JavaScript и CSS
Давайте начнем с метода, который сочетает в себе JavaScript и CSS для динамического добавления подчеркивания к тегу привязки после щелчка по нему. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <style>
    .visited {
      text-decoration: underline;
    }
  </style>
  <script>
    function underlineLink() {
      var links = document.getElementsByTagName("a");
      for (var i = 0; i < links.length; i++) {
        links[i].addEventListener("click", function() {
          this.classList.add("visited");
        });
      }
    }
  </script>
</head>
<body>
  <a href="#" onclick="underlineLink()">Click me</a>
</body>
</html>

В этом методе мы определяем класс CSS под названием «visited», который добавляет подчеркивание к тексту. Функция JavaScript underlineLink()запускается при нажатии на тег привязки. Он добавляет класс «посещенный» к элементу, по которому щелкнули, что приводит к эффекту подчеркивания.

Метод 2: использование псевдокласса :visited
Другой подход заключается в использовании псевдокласса CSS :visited, который применяет стили к посещенным ссылкам. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <style>
    a:visited {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <a href="#">Click me</a>
</body>
</html>

В этом методе мы применяем стиль text-decoration: underline;непосредственно к селектору a:visited. При посещении ссылки она автоматически подчеркивается.

Метод 3: использование JavaScript и встроенных стилей.
Если вы предпочитаете полностью обрабатывать эффект подчеркивания с помощью JavaScript, вы можете изменить встроенный стиль тега привязки. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <script>
    function underlineLink() {
      var link = document.getElementById("myLink");
      link.style.textDecoration = "underline";
    }
  </script>
</head>
<body>
  <a href="#" id="myLink" onclick="underlineLink()">Click me</a>
</body>
</html>

В этом методе функция JavaScript underlineLink()извлекает элемент тега привязки, используя его идентификатор, и изменяет его свойство стиля textDecorationна «подчеркивание» при нажатии.