Помогите разобраться с табами (jQuery)

297

13 января 2017, 10:20

Не выделяются 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>

Ссылка на код

Answer 1

Вы не указали 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>