JavaScript: Делаем вкладки активными по клику с onclick()
Быстрый ответ
Для того чтобы передать элемент в функцию при срабатывании события onclick
и присвоить ему класс, вы можете использовать ключевое слово this
. Внутри функции используйте метод element.classList.add('class-name')
, чтобы достичь данной цели:
<button onclick="highlight(this);">Нажми на меня</button>
<script>
function highlight(element) {
element.classList.add('active');
}
</script>
При клике на кнопку срабатывает функция highlight
, которой передаётся текущий элемент (this
), и к которому добавляется класс 'active'.
Взаимодействие с множеством элементов
Если у вас имеется несколько интерактивных объектов, например, закладки или элементы меню, и вы хотите сделать активным элемент, на который было произведено нажатие, вы можете реализовать это следующим образом:
<ul>
<li onclick="makeActive(this)">Закладка 1</li>
<li onclick="makeActive(this)">Закладка 2</li>
<li onclick="makeActive(this)">Закладка 3</li>
</ul>
<script>
function makeActive(tab) {
// Снимаем активный класс со всех закладок
document.querySelectorAll('.active').forEach(tab => tab.classList.remove('active'));
// Присваиваем класс 'active' выбранной закладке
tab.classList.add('active');
}
</script>
Такой подход дает возможность снять активный класс со всех закладок и присвоить его лишь той, по которой был произведён клик.
Корректировка обработки событий
От inline-обработчика к внешнему с использованием addEventListener
Применение addEventListener
делает код структурированным и удобным для поддержки:
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', (event) => {
document.querySelectorAll('.active').forEach(tab => tab.classList.remove('active'));
event.target.classList.add('active');
});
});
Применение атрибутов data-*
Атрибуты data-*
облегчают взаимодействие с элементами благодаря возможности их идентификации:
<button data-tab="1" onclick="activateTab(this)">Закладка 1</button>
<button data-tab="2" onclick="activateTab(this)">Закладка 2</button>
<script>
function activateTab(element) {
document.querySelectorAll('[data-tab]').forEach(tab => tab.classList.remove('active'));
element.classList.add('active');
}
</script>
Оптимизация событий с помощью делегирования событий
Делегирование событий — отличный способ работы с множеством элементов и теми, что добавляются динамически:
document.addEventListener('click', (event) => {
if (event.target.matches('.tab')) {
setActiveTab(event.target);
}
});
function setActiveTab(tab) {
tab.classList.add('active');
}
Визуализация
В качестве примера, предположим, что HTML это световая аппаратура на концерте и вы хотите подсветить артиста:
<button onclick="highlight(this)">Ударник!</button>
Когда вы нажимаете кнопку, функция highlight
включает прожектор на артисте:
function highlight(element) {
element.classList.add('spotlight');
}
Визуализация:
До нажатия: 🥁
После нажатия: 💡🥁 // Теперь ударник в центре внимания!
Каждый клик переключает свет на новую звезду сцены. Пора начинать концерт!
Потенциальные проблемы и лучшие практики
Контролируйте свое 'this'
Важно помнить, что при использовании this
в инлайн обработчике событий он ссылается на элемент, инициировавший данное событие.
Будьте аккуратны с синтаксисом
Будьте внимательны ко всем опечаткам и синтаксическим ошибкам, которые могут помешать корректной работе вашего кода.
Перестаньте использовать jQuery
В ситуациях, когда каждая миллисекунда важна, более целесообразно использовать "чистый" JavaScript, а не jQuery.
Корректная целевая аудитория
Проверьте, что вы присваиваете классы на корректном уровне элементов, чтобы достичь ожидаемого визуального эффекта.
Полезные материалы
- HTML DOM Event Object — руководство по объекту события HTML.
- Element: classList property – Web APIs | MDN — описание API classList.
- EventTarget: addEventListener() method – Web APIs | MDN — подробное изложение метода addEventListener().
- Introduction to browser events — введение в события браузера на JavaScript.
- JavaScript DOM EventListener — использование DOM слушателей событий.
- The Final Steps to Mastering JavaScript's "this" Keyword — SitePoint — обзор ключевого слова 'this' в JavaScript.