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

Question

[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();

Answer 1

[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>

Comments

[test-cats]

спасибо. из вашего кода узнал даже несколько новых команд)))

Answer 2

[Шохрух Шаймардонов]

Добаьте id, а то вы работаете с помощью классов и у вас на странице все табы срабатывают.
Проще всего добавить id обертке табов и в селекторе также подправить

Comments

[test-cats]

как именно нужно указать id? Это мне после нужно будет каждый элемент потом еще в js выбирать и подключать в отдельную функцию, если я вас правильно понял

[Шохрух Шаймардонов]

test-cats, ну через цикл придется сделать. див с классом таб дайте ид. и в функции просто перепишите пару строк

[test-cats]

Шохрух Шаймардонов, не совсем понял вас. Я id добавил обертке, но теперь работают только одни табы, а вторые не переключаются

[WapSter]

test-cats, вы Шарите вообще в js. Если ответите, что такое контекст js в вашем понимании, без труда отвечу на ваш вопрос.

[test-cats]

WapSter, если хорошо шарил, то не спрашивал бы тут ничего наверно или так не понятно, что еще только учусь? Если хотите помочь, то помогите, если вам сложно это сделать, то пройдите мимо

[Шохрух Шаймардонов]

test-cats, да. Вам теперь каждому табу (можно циклически) добавить функцию