1

Есть код по созданию табов в js. Не очень понимаю как он работает, можете объяснить что он делает? Может написать комментарии

var tabsLink = document.querySelectorAll('.nav-tabs a'),
      tabsElement = document.querySelectorAll('.tab-pane'),
      i;

tabsElement[0].classList.add('tab-open');

var showTabs = function(e) {
  e.preventDefault();
  var targetElement = document.querySelectorAll(this.getAttribute('href'));
  for (i = 0; i < targetElement.length; i++) {
    if (targetElement[i].classList.contains('tab-open')) {
      return false;
    } else targetElement[i].classList.add('tab-open');
  }
  
  targetElement = document.querySelectorAll(".tab-pane.tab-open:not("+ this.getAttribute('href')+")");
  for (i = 0; i < targetElement.length; i++) {
      targetElement[i].classList.remove('tab-open');
  }
  
};

for (i = 0; i < tabsLink.length; i++) {
  tabsLink[i].addEventListener('click', showTabs);
}  

HTML

<body>
  <div class="container">
    <div class="tabs-wrapper">
      <ul class="nav-tabs">
        <li><a href="#tabs1" class="tab-active" data-toggle="tab">Tabs 1</a>
        </li>
        <li><a href="#tabs2" data-toggle="tab">Tabs 2</a>
        </li>
        <li><a href="#tabs3" data-toggle="tab">Tabs 3</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane" id="tabs1"><span class="title-tabs">Tabs1</span> Текст </div>
        <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span> Текст </div>
        <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span> Текст </div>
      </div>
    </div>
  </div>
</body>

var tabsLink = document.querySelectorAll('.nav-tabs a'),
  tabsElement = document.querySelectorAll('.tab-pane'),
  i;

tabsElement[0].classList.add('tab-open');

var showTabs = function(e) {
  e.preventDefault();
  var targetElement = document.querySelectorAll(this.getAttribute('href'));
  for (i = 0; i < targetElement.length; i++) {
    if (targetElement[i].classList.contains('tab-open')) {
      return false;
    } else targetElement[i].classList.add('tab-open');
  }

  targetElement = document.querySelectorAll(".tab-pane.tab-open:not(" + this.getAttribute('href') + ")");
  for (i = 0; i < targetElement.length; i++) {
    targetElement[i].classList.remove('tab-open');
  }

};

for (i = 0; i < tabsLink.length; i++) {
  tabsLink[i].addEventListener('click', showTabs);
}
<div class="container">
  <div class="tabs-wrapper">
    <ul class="nav-tabs">
      <li><a href="#tabs1" class="tab-active" data-toggle="tab">Tabs 1</a>
      </li>
      <li><a href="#tabs2" data-toggle="tab">Tabs 2</a>
      </li>
      <li><a href="#tabs3" data-toggle="tab">Tabs 3</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane" id="tabs1"><span class="title-tabs">Tabs1</span> Текст </div>
      <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span> Текст </div>
      <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span> Текст </div>
    </div>
  </div>
</div>

0

2 ответа 2

2
var tabsLink = document.querySelectorAll('.nav-tabs a'),
        // получил все ссылки
        tabsElement = document.querySelectorAll('.tab-pane'),
        // получил все табы
        i;

    tabsElement[0].classList.add('tab-open');
    // добавить класс к первому элементу tab open c id = tabs1

    var showTabs = function (e) {
        e.preventDefault();
        // убрали события ссылки чтобы не перенаправляло
        var targetElement = document.querySelectorAll(this.getAttribute('href'));

        // здесь получаем targetelemtn this.getAttribute('href') ворачивывает ссылку, в ссылки храниться #tabs2 | 3 | 1
        // то есть document.querySelectorAll('#tabs3');

        for (i = 0; i < targetElement.length; i++) {
            if (targetElement[i].classList.contains('tab-open')) {
                return false;
            } else targetElement[i].classList.add('tab-open');
            // если этот элемент target имеет этот классс то остановаить цикл или же добавить класс
        }

        targetElement = document.querySelectorAll(".tab-pane.tab-open:not(" + this.getAttribute('href') + ")");
        // все target элементы кроме текущего
        for (i = 0; i < targetElement.length; i++) {
            targetElement[i].classList.remove('tab-open');
            // убрать у них класс tab open 
        }

    };

    for (i = 0; i < tabsLink.length; i++) {
        tabsLink[i].addEventListener('click', showTabs);
        // добавить событие для каждой кнопки
    }  
0
tabsElement[0].classList.add('tab-open'); // при загрузке первый таб закгужается активным

tabsLink[i].addEventListener('click', showTabs) // в обект showTabs отправить event 

var targetElement = document.querySelectorAll(this.getAttribute('href'));
 for (i = 0; i < targetElement.length; i++) {
  if (targetElement[i].classList.contains('tab-open')) {
  return false;
} else targetElement[i].classList.add('tab-open'); // тут добавляет класс tab-open 

// здес: удаляет класс предыдущий активного таба
 for (i = 0; i < targetElement.length; i++) {
  targetElement[i].classList.remove('tab-open');
 }

Ваш ответ

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

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