Tabs

by tripcollor

HTML

<div class="tab-head">
  <div data-tab="0" class="tab-head_item">
    <div class="tab-head_icon tab-head_icon1"></div>
    <h2 class="tab-head_title">Один</h2>
  </div>
  <div data-tab="1" class="tab-head_item">
    <div class="tab-head_icon tab-head_icon2"></div>
    <h2 class="tab-head_title">Два</h2>
  </div>
  <div data-tab="2" class="tab-head_item">
    <div class="tab-head_icon tab-head_icon3"></div>
    <h2 class="tab-head_title">Три</h2>
  </div>
</div>

<div class="tabs-body">
  <div class="tabs-body_item">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad voluptatibus aut aperiam vitae architecto consequuntur quas. Ratione nesciunt quidem temporibus recusandae voluptatibus ipsa cupiditate aut. Rem laborum fugit, voluptatum ipsa.</p>
  </div>
  <div class="tabs-body_item">
    <p>Lorem</p>
  </div>
  <div class="tabs-body_item">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quas, aperiam? Expedita ex illo illum odio modi, nulla quam doloribus, officiis omnis qui veniam ea dolorem eum corporis est cum.</p>
  </div>
</div>

SCSS

.tab-head{
  &_item{
    display: inline-block;
    background: #ccc;
    padding: 0 15px;
    cursor: pointer;
  }
  &_icon{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
  }
  &_title{
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
  }
}

.tabs-body{
  padding: 15px;
  background: #ccc;
}

JavaScript

$('.tab-head_item').click(function(e){

	e.preventDefault()
	var dataTab = $(this).attr('data-tab');
  var tabShow = $('.tabs-body_item');
	tabShow.each(function(index, value){
  	if(dataTab == index){
   		$(this).css('display', 'none');
    }
  });
});