jQ Tabs Простой пример табов (custom)

tabs

//--HTML--//
<nav class="bottom_bar">
	<ul>
		<li><p>+7 (495) 979-4994</p></li>
		<li><p>Московская область Ногинский район п. Новые дома дом 1Б</p></li>
		<li><a href="mailto:[email protected]" class="gray">E-mail: [email protected]</a></li>
		<li><a href="#" title="@"><img src="img/metr_2.png" alt="ment"></a></li>
		<li><a href="#" title="@"><img src="img/ment_1.png" alt="ment"></a></li>
	</ul>
</nav>
//--end HTML--//

//--CSS--//
//tabs jQuery
ul#tab {
	margin-bottom: 10px; height: 32px;
	padding: 0;
	list-style: none;
}
ul#tab li {
	float: left; margin-right: 5px;
}
ul#tab li a {
	background-color: #fff; display: block; border: 1px solid #bbb; padding: 4px 10px; color: #333; border-top-color: #e1e1e1; border-left-color: #e1e1e1;
}
ul#tab li.aktif a {
	background-color: #000; color: #fff; border-color: #000;
}
div.tab_icerik {
	border: 2px solid #ddd; padding: 10px; color: #aaa;
}
//--end CSS--//

//--jS--//
	//tabs
	//Документация http://codepen.io/tayfunerbilen/pen/hKAfb
	$("ul#tab li:first").addClass("aktif");
	$("div.tab_icerik").hide();
	$("div.tab_icerik:first").show();
	$("ul#tab li").click(function(e) {
		var index = $(this).index();
		$("ul#tab li").removeClass("aktif");
		$(this).addClass("aktif");  
		$("div.tab_icerik").hide();
		$("div.tab_icerik:eq(" + index + ")").show();
		return false

	});
//--end jS--//