0

const tabs = (tabSelector, tabContentSelector, anchorSelector) => {
    const tabs = document.querySelectorAll(tabSelector),
        tabContents = document.querySelectorAll(tabContentSelector);
    const anchor = document.querySelectorAll(anchorSelector);
    tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => {
            inactiveTab();
            tab.classList.add('active');
            hideContent();
            showContent(i);
        });
    });

    function hideContent() {
        tabContents.forEach(item => {
            item.classList.remove('show');
            item.style.display = 'none';
        });
    }
    if (tabs.length > 1) {
        anchor.forEach((item, i) => {
            item.addEventListener('click', () => {
             
                hideContent();
                showContent(i);
                inactiveTab(i);
                tabs[i].classList.add('active');
                

            })
        })
    }


    function showContent(i = 0) {
        tabContents[i].style.display = 'block';
        tabContents[i].classList.add('show');
    }
    function inactiveTab() {
        tabs.forEach(item => item.classList.remove('active'));
    }
    hideContent();
    showContent(); 
 }; 
 
 export default tabs;
 
 //вот тут функция табов вызывается
 
 window.addEventListener('DOMContentLoaded', function() {
    Slick();
    button();

    form('https://stalbr.ru/mail.php');
    navbar();

    try {
        tabs('[data-tabs]', '.tabs-content', '.roof_anchor');
    } catch (error) {}
<section class="production" id="production">
  <div class="container">
    <div class="row">
      <div class="col-xl-4 col-sm-12">
        <h3>Продукция</h3>
        <hr>
      </div>
      <div class="col-xl-8 col-sm-12">
        <p>
          Ниже представлены некоторые стандартные изделия, которые мы предлагаем. Также производим любые изделия по вашим размерам.
          Материалы выполнения: оцинкованная сталь, нержавеющая сталь, алюминий, медь. Стандартная толщина металла от 0,35мм до 0,7мм. 
          Широкая цветовая гамма по каталогу RAL и текстур под дерево, более 100 оттенков. Одностороннее и двухстороннее покрытие.
        </p>
      </div>
    </div>

    <nav>
      <div class="nav nav-tabs">
        <button class="nav-link active tab-item btn-primary" data-tabs>Кровля</button>
        <button class="nav-link tab-item btn-primary" data-tabs>Фасад</button>
        <button class="nav-link tab-item btn-primary" data-tabs>Для бани</button>
        <button class="nav-link tab-item btn-primary" data-tabs>Другое</button>
        <a href="https://stalbr.ru/zabory/" class="nav-link tab-item btn-primary" style="color: white;">Забор Жалюзи</a>
      </div>
    </nav>
    <!--Товары-->
    <!--1 ряд-->
    <div class="tabs-contents-wrapper">
      <div class="tabs-content fade show">
        <div class="row">
          <div class="col-xl-12 col-md-12 col-sm-12">
            <div class="card-deck-wrapper">
              <div class="card-deck" id='roof'>
                <!-- content -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- фасады -->
      <div class="tabs-content fade">
        <div class="row">
          <div class="col-xl-12 col-md-12 col-sm-12">
            <div class="card-deck-wrapper">
              <div class="card-deck" id="facade">
                <!-- content -->
              </div>
            </div>
          </div>
        </div>
      </div>

1 ответ 1

0

У вас в функции tabs есть функция showContent. Можете вернуть её и использовать далее.

const tabs = (tabSelector, tabContentSelector, anchorSelector) => {
  const tabs = document.querySelectorAll(tabSelector);
  const tabContents = document.querySelectorAll(tabContentSelector);
  const anchor = document.querySelectorAll(anchorSelector);
  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => {
      inactiveTab();
      tab.classList.add('active');
      hideContent();
      showContent(i);
    });
  });

  function hideContent() {
    tabContents.forEach((item) => {
      item.classList.remove('show');
      item.style.display = 'none';
    });
  }
  if (tabs.length > 1) {
    anchor.forEach((item, i) => {
      item.addEventListener('click', () => {
        const urlParams = new URLSearchParams(location.search);
        const tabTo = urlParams.get('tab');
        hideContent();
        showContent(i);
        inactiveTab(i);
        tabs[i].classList.add('active');
        console.log(urlParams);
        console.log(tabTo);
      });
    });
  }
  if (tabTo) {
    tabs.switchTabTo(tabTo);
  }

  function showContent(i = 0) {
    tabContents[i].style.display = 'block';
    tabContents[i].classList.add('show');
  }
  function inactiveTab() {
    tabs.forEach((item) => item.classList.remove('active'));
  }
  hideContent();
  showContent();

  return {
    showContent
  }
};

export default tabs;

//вот тут функция табов вызывается

window.addEventListener('DOMContentLoaded', function () {
  Slick();
  button();

  form('https://stalbr.ru/mail.php');
  navbar();

  try {
    const tab = tabs('[data-tabs]', '.tabs-content', '.roof_anchor');
    tab.showContent(/* индекс нужного таба */)
  } catch (error) {}
});

1
  • Спасибо за ответ) но подскажите, пожалуйста, какой индекс таба использовать, если они заданы одинаковыми data атрибутами data-tabs? 25 дек 2021 в 19:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.