### CSS ####
.tabs__controls-item{
	margin-left: 10px;
	background: #2C3E58;
	display: inline-block;
	transition: 0.5s all;

}

.tabs__controls-item:hover,.tabs__controls-item.active{
	background: #2ECC31;
}
.tabs__controls-item:first-child{
	margin-left: 0;
}

.tabs__controls-link{
	color: #FFF;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
	padding: 3px 7px;
}
.tabs__item{
	border: 1px dashed #3d3d3d;
	display: none;
}
.tabs__item.active{
	display: block;
}

###html###
<div class="tabs">
	<ul class="tabs__controls">
		<li class="tabs__controls-item active">
			<a href="" class="tabs__controls-link">Link 1</a>
		</li>
		<li class="tabs__controls-item">
			<a href="" class="tabs__controls-link">Link 2</a>
		</li>
		<li class="tabs__controls-item">
			<a href="" class="tabs__controls-link">Link 3</a>
		</li>
		<li class="tabs__controls-item">
			<a href="" class="tabs__controls-link">Link 4</a>
		</li>
		<ul class="tabs__list">
			<li class="tabs__item active">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, saepe.</li>
			<li class="tabs__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, saepe.</li>
			<li class="tabs__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, saepe.</li>
			<li class="tabs__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, saepe.</li>
		</ul>
	</ul>
</div>
##### JS ####

$('.tabs__controls-link').on('click', function(e){
		e.preventDefault();
		var item = $(this).closest('.tabs__controls-item'),
		content = $('.tabs__item'),
		itemPosition = item.index();
		console.log(itemPosition);
		content.eq(itemPosition).addClass('active').siblings().removeClass('active')
		item.addClass('active').siblings().removeClass('active')
	});

	Можно добавить классы табам, а ссылкам дата атрибуты data-class="first"
, и выборку делать не по индексам а по дата атрибутам