Включение и отключение ссылок в jQuery: методы и подходы

Быстрый ответ

Чтобы регулировать поведение якорной ссылки при помощи jQuery, воспользуйтесь изменением свойства pointer-events через метод .css() или корректируйте атрибут href при помощи методов .attr() или .removeAttr().

// Отмена кликабельности (ссылка отправлена в отпуск 🏖️):
$("#myAnchor").css("pointer-events", "none").attr("href", "#");

// Возобновление кликабельности (ссылка возвращается в строй 🚀):
$("#myAnchor").css("pointer-events", "auto").attr("href", "http://example.com");

Предотвращение стандартного действия

Примените метод preventDefault() для прерывания стандартного действия якоря. В версиях jQuery 1.7 и последующих используйте .on("click", ...), а в более ранних — .click() или `.bind("click").

// jQuery версии >= 1.7: прерываем стандартное действие якоря
$('a.myAnchor').on("click", function (e) {
  if ($(this).hasClass('disabled')) {
    e.preventDefault();  // ссылка "отложена в долгий ящик"
  }
});

// Для старых версий jQuery: аналогичное действие
$('a.myAnchor').bind("click", function (e) {
  if ($(this).hasClass('disabled')) {
    e.preventDefault();  // словно откладываем отпуск
  }
});

Улучшение юзабилити с использованием класса disabled

Сделайте пользовательский интерфейс более понятным, отмечая неактивные ссылки классом disabled и применяя соответствующие CSS-стили, включая pointer-events: none.

/* Стилизация неактивных ссылок – они становятся незаметнее */
a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;// курсор в режиме "мирная демонстрация"
}

Анимация деактивации и активации

Способствуйте созданию динамичного впечатления для пользователей, сопровождая переключение состояний ссылки методами fadeTo() или fadeOut(), обеспечивающими плавные переходы между активным и неактивным состоянием.

// Плавное затемнение ссылки – она как бы уходит на каникулы
$("#myAnchor").addClass('disabled').fadeTo('fast', 0.5);

// Плавное возобновление активности ссылки – как пробуждение из сна
$("#myAnchor").removeClass('disabled').fadeTo('fast', 1);

Поддержка браузеров и продвинутые рекомендации

Перед использованием pointer-events проверьте их поддержку в целевых браузерах и внимательно отнеситесь к доступности. Рассмотрите возможность применения атрибутов disabled или aria-disabled для улучшения доступности элементов управления.

Визуализация

Визуальное демонстрирование процесса активации и деактивации якорной ссылки при помощи jQuery:

Активный якорь:     [🔗✨] (Кликабельная ссылка – Включена)
Неактивный якорь:   [🔗🚫] (Ссылка покажется бледной – Отключена)

Активация ссылки:

$('a#myLink').removeClass('disabled').attr('href', 'http://example.com');

Ссылка стала яркой и заметной: [🔗✨]

Деактивация ссылки:

$('a#myLink').addClass('disabled').removeAttr('href');

Ссылка отправилась в отпуск: [🔗🚫]

Продвинутые советы и учет специфических ситуаций

Взаимодействие с другими скриптами

Убедитесь, что другие скрипты не вносят изменения в поведение вашей ссылки, чтобы избежать непредвиденных результатов взаимодействия с кодом вашей страницы.

Подробнее об этом расскажет наш спикер на видео

Контекстное управление событиями

Разработайте логику, которая позволяет деактивировать ссылку в зависимости от определенных условий:

$('a#conditionalAnchor').on("click", function (e) {
  // Если условия требуют отключения ссылки
  if (shouldBeDisabled()) {
    $(this).addClass('disabled').removeAttr('href');
    e.preventDefault();  // ссылка отправляется на отдых 
  } else {
    $(this).removeClass('disabled').attr('href', 'http://example.com');// ссылка вернулась из отпуска!
  }
});

Универсальное отключение в разнообразии браузеров

Воспользуйтесь JavaScript для коррекции атрибута tabindex таким образом, чтобы неактивные ссылки не были включены в фокус при навигации с помощью клавиатуры.

// Фокус на элементе – переоцененное явление.
$("#myUnfocusableAnchor").attr('tabindex', '-1');

// Ссылке следует вернуть возможность воспринимать фокус.
$("#myFocusableAnchor").attr('tabindex', '0');

Полезные материалы

1. jQuery API Documentation — Официальная документация метода .prop() в jQuery.
2. Stack Overflow Discussion: Disable jQuery Anchor — Обсуждение методов деактивации якорных ссылок при помощи jQuery на Stack Overflow.
3. jQuery Learning Center — Информация о манипулировании элементами в jQuery.
4. CSS-Tricks: Pointer Events — Материалы о работе с событиями указателя и методах деактивации якорей.
5. MDN: EventTarget.addEventListener() — Сведения о регулировании событий в JavaScript и спецификах работы с якорями.
6. W3Schools: jQuery.removeAttr() — Подробное объяснение удаления атрибутов и деактивации элементов через jQuery.
7. MDN: HTMLAnchorElement Reference — Справочная информация о свойствах и методах HTML-элемента якоря.