@test-cats

Как использовать код повторно на странице?

Написал небольшой код для табов. Подскажите, как нужно его исправить, чтобы можно было использовать повторно на странице? Сейчас при переключении одного списка табов переключается и второй. Как это можно исправить без дублирования кода?

Всем большое спасибо

<div class="wrapper">
        <div class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>

        <div class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>
    </div>


.wrapper {
	margin: 0 auto;
	width: 800px;
}

.tabs-nav {
	display: flex;
	justify-content: space-between;
}
.tabs-nav__item {
	border-bottom: 1px solid transparent;
	cursor: pointer;
	flex: 1;
	padding: 20px;
}

.tabs-nav__item.is-active {
	border-color: #55a32a;
}

.tab {
	background-color: #f2f2f2;
	display: none;
	padding: 20px;
}
.tab.is-active { display: block; }


let tab = function () {
    let tabNav = document.querySelectorAll('.tabs-nav__item'),
        tabContent = document.querySelectorAll('.tab'),
        tabName;
    tabNav.forEach(item => {
        item.addEventListener('click', selectTabNav)
    });

    function selectTabNav() {
        tabNav.forEach(item => {
            item.classList.remove('is-active')
        });
        this.classList.add('is-active');
        tabName = this.getAttribute('data-tab-name');
        selectTabContent(tabName);
    }

    function selectTabContent(tabName) {
        tabContent.forEach(item => {
            item.classList.contains(tabName) ? item.classList.add('is-active') :
                item.classList.remove('is-active');
        })

    }
};

tab();
  • Вопрос задан
  • 186 просмотров
Решения вопроса 1
RAX7
@RAX7
function tabs(selector) {
  const tab = document.querySelector(selector);
  const tabNav = tab.querySelectorAll('.tabs-nav__item');
  const tabContent = tab.querySelectorAll('.tab');
  
  tab.addEventListener('click', selectTabNav);

  function selectTabNav(event) {
    const tabName = event.target.dataset.tabName;
    if (!tabName) return;
 
    tabNav.forEach(item => item.classList.remove('is-active'));
    event.target.classList.add('is-active');

    tabContent.forEach(item => {
      item.classList.contains(tabName) ?
      	item.classList.add('is-active') :
        item.classList.remove('is-active');
    });
  }
}

tabs('#tabs-1');
tabs('#tabs-2');


<div class="wrapper">
  <div id="tabs-1" class="tabs">
  <!-- ... -->
  </div>

  <div id="tabs-2" class="tabs">
  <!-- ... -->
  </div>
</div>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Добаьте id, а то вы работаете с помощью классов и у вас на странице все табы срабатывают.
Проще всего добавить id обертке табов и в селекторе также подправить
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы