0

На данный момент есть такой код:

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')) {
      targetElement[i].classList.remove('tab-open');
      return false;
    }
    targetElement[i].classList.add('tab-open');
  }
};

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

* {
  padding: 0;
  margin: 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.tabs-wrapper {
  margin-top: 30px;
}
.nav-tabs {
  margin-bottom: 15px;
}
.nav-tabs li {
  list-style: none;
  display: inline-block;
}
.nav-tabs a {
  font-size: 15px;
  display: inline-block;
  text-decoration: none;
  color: #428bca;
  padding: 12px 25px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.nav-tabs a:hover {
  background: #eee;
  transition: 0.3s;
}
.nav-tabs .tab-active {
  color: #000;
}
.tab-pane {
  padding: 20px;
  background: #f7f7f9;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
  display: none;
}
.tab-open {
  display: block;
}
.title-tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis recusandae dignissimos fugit reprehenderit nam eum qui magni. Assumenda amet nostrum earum sequi a hic, quis autem blanditiis dolorum, laborum
          eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat corporis, dolorum! Error nostrum molestias quae accusantium ipsam impedit aliquid dolore cupiditate eos quo, obcaecati sunt, rem est dolorum, explicabo, doloribus.</div>
        <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente, delectus tenetur quos molestias nulla ducimus dolores iste, aspernatur, a rerum ullam at veritatis laboriosam molestiae eius illo
          dolor maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam soluta alias illum consequatur tenetur a repellat, fugit deleniti perspiciatis amet, ab dolorum. Veritatis cupiditate voluptatibus temporibus. Aspernatur quisquam
          est ut!</div>
        <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et exercitationem quam tempora voluptatum minima minus quibusdam blanditiis, mollitia quia numquam ea sint, molestiae molestias, temporibus assumenda
          ipsam ullam cupiditate. Architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perferendis, voluptatibus, quidem quam veritatis mollitia illum veniam obcaecati, voluptate ad illo consequuntur neque alias magnam magni vel,
          facilis ipsum culpa!</div>
      </div>
    </div>
  </div>
</body>

Тут как обычно первая вкладка открыта, теперь мне надо сделать следующие чтобы при клике на Tabs 2 скрывался блок текста первого таба и появлялся второй, суть такова чтобы при клике на разные кнопки показывались только те блоки которые заданы у кнопки в href, чтобы не было как сейчас на каждую кнопку нажимал и все показались в ряд. Не могу понять как дальше действовать.

3
  • код должен быть непосредственно в вопросе, ссылки могут быть дополнением
    – Grundy
    Commented 25 авг. 2016 в 13:27
  • хотя бы одна вкладка всегда должна быть открыта? или все сразу тоже могут быть закрыты?
    – Grundy
    Commented 25 авг. 2016 в 13:38
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 17 сент. 2016 в 8:59

2 ответа 2

1

Добавьте ещё один querySelectorAll и цикл по результату который удаляет ранее установленный класс "tab-open":

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')) {
      targetElement[i].classList.remove('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);
}
/*Tabs in Javascript*/

* {
  padding: 0;
  margin: 0;
}
.container {
  max-width: 960px;
  margin: 0 auto;
}
.tabs-wrapper {
  margin-top: 30px;
}
.nav-tabs {
  margin-bottom: 15px;
}
.nav-tabs li {
  list-style: none;
  display: inline-block;
}
.nav-tabs a {
  font-size: 15px;
  display: inline-block;
  text-decoration: none;
  color: #428bca;
  padding: 12px 25px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.nav-tabs a:hover {
  background: #eee;
  transition: 0.3s;
}
.nav-tabs .tab-active {
  color: #000;
}
.tab-pane {
  padding: 20px;
  background: #f7f7f9;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
  display: none;
}
.tab-open {
  display: block;
}
.title-tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis recusandae dignissimos fugit reprehenderit nam eum qui magni. Assumenda amet nostrum earum sequi a hic, quis autem blanditiis dolorum, laborum
          eos! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat corporis, dolorum! Error nostrum molestias quae accusantium ipsam impedit aliquid dolore cupiditate eos quo, obcaecati sunt, rem est dolorum, explicabo, doloribus.</div>
        <div class="tab-pane" id="tabs2"><span class="title-tabs">Tabs2</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi sapiente, delectus tenetur quos molestias nulla ducimus dolores iste, aspernatur, a rerum ullam at veritatis laboriosam molestiae eius illo
          dolor maxime. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam soluta alias illum consequatur tenetur a repellat, fugit deleniti perspiciatis amet, ab dolorum. Veritatis cupiditate voluptatibus temporibus. Aspernatur quisquam
          est ut!</div>
        <div class="tab-pane" id="tabs3"><span class="title-tabs">Tabs3</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et exercitationem quam tempora voluptatum minima minus quibusdam blanditiis, mollitia quia numquam ea sint, molestiae molestias, temporibus assumenda
          ipsam ullam cupiditate. Architecto. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perferendis, voluptatibus, quidem quam veritatis mollitia illum veniam obcaecati, voluptate ad illo consequuntur neque alias magnam magni vel,
          facilis ipsum culpa!</div>
      </div>
    </div>
  </div>
</body>

9
  • стоит добавить описание того, что поменялось
    – Grundy
    Commented 25 авг. 2016 в 13:52
  • @Grundy только javascript в пределах комментариев
    – sercxjo
    Commented 25 авг. 2016 в 13:55
  • и что делает этот добавленный кусок? :-)
    – Grundy
    Commented 25 авг. 2016 в 13:55
  • у вас при двойном клике на таб пропадает весь блок текста recordit.co/oxdB1PVB4n
    – Shezmu
    Commented 25 авг. 2016 в 13:58
  • 2
    @АвтоматиЗолото, возможно автору именно так и надо, об этом нет ничего в вопросе
    – Grundy
    Commented 25 авг. 2016 в 13:59
0
var targetElement = document.querySelectorAll(this.getAttribute('href'));

По id он находит один элемент, for перебирает один раз его и всё.

4
  • как это отвечает на вопрос?
    – Grundy
    Commented 25 авг. 2016 в 13:57
  • @Grundy Это явная ошибка.
    – eavam
    Commented 25 авг. 2016 в 14:00
  • 1
    Почему это? он выбирает все нужные ему элементы, и все их обрабатывает. То что выбирается всего один элемент - не имеет значения
    – Grundy
    Commented 25 авг. 2016 в 14:06
  • Не думаю что задумка была в том чтобы перебрать один элемент фором.
    – eavam
    Commented 25 авг. 2016 в 14:14

Ваш ответ

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

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