NazariyM
12/3/2016 - 2:16 PM

.js

HTML:
<div class="wrapper">
    <div class="tabs">
        <span class="tab">Вкладка 1</span>
        <span class="tab">Вкладка 2</span>
        <span class="tab">Вкладка 3</span>        
    </div>
    <div class="tab_content">
        <div class="tab_item">Содержимое 1</div>
        <div class="tab_item">Содержимое 2</div>
        <div class="tab_item">Содержимое 3</div>
    </div>
</div>
initTabs();
function initTabs() {
  const $tabs = $('.js-tabs');
  const $tabsNav = $tabs.find('.tabs__nav-item');
  const $tabsContent = $tabs.find('.tabs__content-item');

  $tabsContent.not(':first').hide();

  $tabsNav.on('click', function (ev) {
    ev.preventDefault();
    $tabsNav.removeClass('is-active').eq($(this).index()).addClass('is-active');
    $tabsContent.hide().eq($(this).index()).fadeIn();
  }).eq(0).addClass('is-active');
}