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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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