Cacher is the code snippet organizer for pro developers

.tab.js-tab-wrap
	.tab__head
		-
			var items = [
				"Пункт 1",
				"Пункт 2",
				"Пункт 3",
				"Пункт 4"
			];
		each item in items
			.tab__head-el.js-tab-head(class=item== 'Пункт 1' ? 'active' : null) #{item}  //Если текущий пункт  = Пункт 1, то добавить активный класс
	.tab-info-wrap
		- for (var i=0;i<9;i++)
			.tab-cont.js-tab-info(class=i==1 ? 'active' : null)
				// text her

// tab
.js-tab-info
	position: absolute
	top 0
	left: -9999px
	opacity:0
.js-tab-head.active
	color $mark
.js-tab-info.active
	opacity: 1
	position: relative
	top initial
	left initial
	transition opacity .6s
// tab === end

// tab
$('.js-tab-head').click(function(){
	var index = $(this).index();
	var parent = $(this).closest('.js-tab-wrap');
	parent.find('.js-tab-head').removeClass('active');
	$(this).addClass('active');
	parent.find('.js-tab-info').each(function(){
		if($(this).index()===index){
			$(this).addClass('active')
		}else{
			$(this).removeClass('active')
		}
	})
});
// tab === end