как работает этот код на JavaScript

226

02 июня 2018, 08:30

Есть код по созданию табов в 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>

Answer 1

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);
        // добавить событие для каждой кнопки
    }

Answer 2

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');
 }