Как добавить класс ссылке по её атрибуту href: практические решения в JavaScript
Основные подходы к установке класса для ссылки (href) в JavaScript
Как установить класс для ссылки с определённым значением href с помощью classList?
Наиболее эффективное решение - использование метода classList.add() в сочетании с селектором по атрибуту href. Пример:
// Находим ссылку по точному значению href
document.querySelector('a[href="https://example.com"]').classList.add('active');Js href class (установка класса для ссылки (href) в javascript)
Этот подход работает быстро, не перезаписывает существующие классы. Если элемент не найден, возникнет ошибка - перед добавлением класса стоит проверять наличие элемента.
Типичная ошибка: попытка добавить класс к несуществующему элементу. Решение - использовать условную проверку:
const link = document.querySelector('a[href="https://example.com"]');
if (link) link.classList.add('active');Цель использования: точное управление внешним видом конкретной ссылки, например, подсветка текущей страницы в навигации.
Как добавить класс ко всем ссылкам, содержащим определённый фрагмент в href?
Используйте селектор a[href*="..."] для частичного совпадения. Пример:
document.querySelectorAll('a[href*="/products/"]').forEach(link => link.classList.add('product-link'));Этот вариант удобен, когда нужно стилизовать группу ссылок со схожими адресами.
Проблема: селектор *= чувствителен к регистру. Если адреса содержат заглавные буквы, используйте перебор с преобразованием:
document.querySelectorAll('a').forEach(link => {
if (link.href.toLowerCase().includes('/products/')) {
link.classList.add('product-link');
}
});Случаи использования: категоризация ссылок блога, интернет-магазина.
Как установить класс для ссылки, href которой совпадает с текущим URL страницы?
Сравните window.location.href с атрибутом href каждой ссылки. Пример:
document.querySelectorAll('a').forEach(link => {
if (link.href === window.location.href) {
link.classList.add('current-page');
}
});Этот метод часто применяется в навигационных меню для выделения активного пункта.
Распространённая ошибка: несовпадение из-за trailing slash или протоколов. Решение - нормализация ссылок (например, удаление завершающего слеша).
Как изменить класс ссылки при клике на неё (не переходя по href)?
Используйте обработчик события click с preventDefault(). Пример:
document.querySelector('a.special').addEventListener('click', function(event) {
event.preventDefault();
this.classList.toggle('visited');
});Цель: интерактивная отметка прочитанных ссылок, открытие модальных окон.
Внимание: если ссылка должна выполнять обычный переход, не используйте preventDefault() - тогда класс добавится, но страница перезагрузится. В таких случаях лучше обрабатывать класс на серверной стороне или через sessionStorage.
Как добавить класс динамически созданной ссылке сразу после её появления в DOM?
Используйте MutationObserver для отслеживания новых элементов. Альтернатива - делегирование событий добавления класса в момент вставки. Пример через наблюдатель:
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1 && node.matches('a[href*="/new/"')) {
node.classList.add('new-link');
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });Когда это нужно: в одностраничных приложениях (SPA), где контент подгружается асинхронно.
Проблема: излишняя нагрузка на производительность при частых мутациях. Решение - ограничить область наблюдения или использовать делегирование событий на родителе.
Как удалить класс у ссылки, если были добавлены другие?
Применяйте classList.remove() для целевого элемента. Пример удаления класса у всех ссылок, кроме одной:
document.querySelectorAll('a.nav-link').forEach(link => link.classList.remove('active'));
document.querySelector('a.nav-link[href="/home"]').classList.add('active');Это типовой паттерн для обновления активного состояния в навигации.
// Пример 1: установка класса для ссылок, чей href начинается с определённого префикса
document.querySelectorAll('a[href^="https://api."]').forEach(el => el.classList.add('api-link'));
// Результат: все ссылки с href, начинающимся на 'https://api.', получат класс 'api-link'// Пример 2: установка класса на основе регулярного выражения
const links = document.querySelectorAll('a');
links.forEach(link => {
if (/\/blog\/\d{4}\/\d{2}\//.test(link.href)) {
link.classList.add('blog-archive');
}
});
// Результат: ссылки вида /blog/2023/01/ получат класс 'blog-archive'// Пример 3: добавление класса с анимацией и последующим удалением
document.querySelector('a.action').addEventListener('click', function(e) {
e.preventDefault();
this.classList.add('loading');
setTimeout(() => {
this.classList.remove('loading');
this.classList.add('done');
}, 2000);
});
// Результат: после клика ссылка получает класс 'loading', через 2 секунды заменяется на 'done'// Пример 4: массовое переключение класса для ссылок с определённым data-атрибутом
document.querySelectorAll('a[data-type="external"]').forEach(link => {
link.classList.toggle('external-link');
});
// Результат: для каждой такой ссылки класс 'external-link' добавляется, если отсутствует, и удаляется, если присутствует// Пример 5: установка класса для ссылок, которые ведут на тот же домен (внутренние)
const currentDomain = window.location.origin;
document.querySelectorAll('a').forEach(link => {
if (link.href.startsWith(currentDomain)) {
link.classList.add('internal');
} else {
link.classList.add('external');
}
});
// Результат: все ссылки разделены на внутренние и внешние с соответствующими классами// Пример 6: работа с относительными путями (без протокола и домена)
document.querySelectorAll('a[href^="/"]').forEach(link => {
link.classList.add('relative-path');
});
// Результат: все ссылки, начинающиеся с '/', получают класс 'relative-path'