Как реализовать бесконфликтную работу нескольких наборов табов?

Как поправить табы?



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

Пробовал так - не работает:

// Add tabs
jQuery(document).ready(function () {
  jQuery('.ls-tabs > ul > li').click(function () {
    var tab_id = jQuery(this).attr('data-tab');
    
    jQuery(this).parent('ul').children('li').removeClass('active');
    jQuery(this).parent('.ls-tabs').children('.ls-content').removeClass('active');

    jQuery(this).addClass('active');
    jQuery(this).closest('.ls-tabs').children("#" + tab_id).addClass('active');
    return false;
  });
});
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Элементы, которым надо переключить класс (т.е., контент и заголовки табов) следует искать не по всей странице, а внутри контейнера, содержащего те табы, с которыми осуществляется взаимодействие. Т.е., от нажатого заголовка надо подняться до контейнера:

const containerSelector = '.tabs';
const headerSelector = `${containerSelector} .tabs-nav__item`;
const contentSelector = `${containerSelector} .tab`;
const activeClass = 'is-active';

function setActiveTab(header) {
  if (header instanceof Element && header.matches(headerSelector)) {
    const container = header.closest(containerSelector);
    const headers = container.querySelectorAll(headerSelector);
    const contents = container.querySelectorAll(contentSelector);
    const index = Array.prototype.indexOf.call(headers, header);
    const toggle = (n, i) => n.classList.toggle(activeClass, i === index);

    headers.forEach(toggle);
    contents.forEach(toggle);
  }
}


// делегирование, подключаем обработчик клика один раз для всех
document.addEventListener('click', e => {
  setActiveTab(e.target.closest(headerSelector));
});

// или, назначаем обработчик клика индивидуально каждому заголовку
document.querySelectorAll(headerSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => setActiveTab(e.currentTarget));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 21:25
2000 руб./за проект
28 мар. 2024, в 21:17
5000 руб./за проект
28 мар. 2024, в 20:46
150000 руб./за проект