jQuery Tabs

by pashkes

HTML

<div class="tabs">
  <div class="tabs__header">
    <div class="tabs__title  js-active">title1</div>
    <div class="tabs__title">title2</div>
    <div class="tabs__title">title3</div>
  </div>
  <div class="tabs__item">Lorem ipsum dolor sit.</div>
  <div class="tabs__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, nulla.</div>
  <div class="tabs__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet aut libero dolores eos at, quia!</div>
</div>

CSS

.tabs__title {
  display: inline-block;
  cursor: pointer;
}

.js-active {
  color: red;
  cursor:default;
}

JavaScript

var tab = $('.tabs__title');
var tabContent = $('.tabs__item');
var curentTab = $(this).index();
tabContent.not(':first').hide();

tab.on('click', function() {
  
	tab
    .removeClass('js-active')
    .eq(curentTab)
    .addClass('js-active');
  
  tabContent
    .hide()
    .eq($(this).index())
    .show();
  
});