Tab-item on tabs are not highlighted. Help me figure out what is wrong? There is:

$('.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>

Link to code

  • Describe your problem more specifically. - Yuri
  • Tabs are switched, but the active class is added only to the tab-pane, but not to the tab-item. - satantx

1 answer 1

You did not specify the index of the second element. It must be specified inside add , since item is already an item that you select

 $('.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>

  • Thank. Did not understand with add apparently. Thought he inherits the index of the previous selector - satantx
  • @satantx, not at all :) - Yuri