0

Не выделяются tab-item на табах. Помогите разобраться, что не так? Имеется:

$('.tabs').each(function() {
  var obj = $(this), item = $('.tab-item', obj), pane = $('.tab-pane', obj);
  pane.eq(0).add(item).addClass('active').siblings().removeClass('active');
  item.click(function() {
    var index = $(this).index();
    pane.eq(index).add(item).addClass('active').siblings().removeClass('active');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tabs">
  <ul class="tabs-list">
    <li class="tab-item">1</li>
    <li class="tab-item">2</li>
    <li class="tab-item">3</li>
    <li class="tab-item">4</li>
  </ul>
  <ul class="pane">
    <li class="tab-pane">1</li>
    <li class="tab-pane">2</li>
    <li class="tab-pane">3</li>
    <li class="tab-pane">4</li>
  </ul>
</div>

Ссылка на код

2
  • Опишите вашу проблему более конкретно.
    – Yuri
    Commented 10 янв. 2017 в 20:30
  • Табы переключаются, но класс active добавляется только к tab-pane, а к tab-item нет.
    – satantx
    Commented 10 янв. 2017 в 20:32

1 ответ 1

0

Вы не указали index второго элемента. Его нужно указывать внутри add, т.к. item является уже элементом, который вы выделяете

$('.tabs').each(function() {
  var obj = $(this), item = $('.tab-item', obj), pane = $('.tab-pane', obj);
  pane.eq(0).add(item.eq(0)).addClass('active').siblings().removeClass('active');

  item.click(function() {
    var index = $(this).index();
    pane.eq(index).add(item.eq(index)).addClass('active').siblings().removeClass('active');
  });
});
.active {color: red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tabs">
  <ul class="tabs-list">
    <li class="tab-item">1</li>
    <li class="tab-item">2</li>
    <li class="tab-item">3</li>
    <li class="tab-item">4</li>
  </ul>
  <ul class="pane">
    <li class="tab-pane">1</li>
    <li class="tab-pane">2</li>
    <li class="tab-pane">3</li>
    <li class="tab-pane">4</li>
  </ul>
</div>

2
  • Спасибо. Не разобрался с add видимо. Подумал, что он наследует индекс предыдущего селектора
    – satantx
    Commented 10 янв. 2017 в 20:46
  • @satantx, не за что :)
    – Yuri
    Commented 10 янв. 2017 в 20:49

Ваш ответ

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

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