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.

Корректная целевая аудитория

Проверьте, что вы присваиваете классы на корректном уровне элементов, чтобы достичь ожидаемого визуального эффекта.

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

1. HTML DOM Event Object — руководство по объекту события HTML.
2. Element: classList property – Web APIs | MDN — описание API classList.
3. EventTarget: addEventListener() method – Web APIs | MDN — подробное изложение метода addEventListener().
4. Introduction to browser events — введение в события браузера на JavaScript.
5. JavaScript DOM EventListener — использование DOM слушателей событий.
6. The Final Steps to Mastering JavaScript's "this" Keyword — SitePoint — обзор ключевого слова 'this' в JavaScript.