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