Как сделать вкладки-табы для сайта на jQuery

Начинаем, как всегда, со структуры HTML: кладем заготовку будущих табов в блок-обертку с id=wr-tabs, далее в ней добавляем блок tabs – в нём будут находиться наши вкладки, и блок content – сюда кладем блоки с выводимым контентом.

<div id="wr-tabs">
	<div class="tabs">
		<div class="tab active">Вкладка №1</div>
		<div class="tab">Вкладка №2</div>
		<div class="tab">Вкладка №3</div>
		<div class="tab">Вкладка №4</div>
	</div>
	<div class="content">
		<div class="tab-cont active">
			Контент №1
		</div>
		<div class="tab-cont">
			Контент №2
		</div>
		<div class="tab-cont">
			Контент №3
		</div>
		<div class="tab-cont">
			Контент №4 
		</div>
	</div>
</div>

Переходим к CSS стилям наших вкладок.

Тут главное указать для активного блока с контентом свойство display со значением block, а для активной вкладки - такой же стиль, как и при наведении.

#wr-tabs{
	width: 700px;
	margin: 40px auto 0;
}
	#wr-tabs .tabs{
		background-color: #fff;
		margin-bottom: 3px;
	}
	#wr-tabs .tabs:after{
		content: "";
		display: block;
		clear: both;
		height: 0;
	}
		#wr-tabs .tabs .tab{
			float: left;
			cursor: pointer;
			border-right: 1px solid #f2f4f9;
			padding: 10px 20px;
		}
		#wr-tabs .tabs .tab:last-child{
			border-right: none;
		}
		#wr-tabs .tabs .tab:hover,
		#wr-tabs .tabs .tab.active{
			background-color: #c7e7f9;
			color: #1d7ee4;
		}
	#wr-tabs .content{
		background-color: #fff;
	}
		#wr-tabs .content .tab-cont{
			display: none;
			padding: 15px 10px;
		}
		#wr-tabs .content .tab-cont.active{
			display: block;
		}

Так как для вкладок мы используем библиотеку jQuery, скрипт получается очень коротким, и, по вашему желанию, может быть легко усложнен различными визуальными эффектами, легко реализуемыми при помощи этой библиотеки.

$(function(){

	$("#wr-tabs").on("click", ".tab", function(){

		var tabs = $("#wr-tabs .tab"),
		    cont = $("#wr-tabs .tab-cont");

		// Удаляем классы active
		tabs.removeClass("active");
		cont.removeClass("active");
		// Добавляем классы active
		$(this).addClass("active");
		cont.eq($(this).index()).addClass("active");

		return false;
	});
});

Принцип работы скрипта заключается в отслеживании клика по вкладке (div с классом tab). При совершении данного события в переменные tabs и cont будут сохраняться выборки всех блоков вкладок и всех блоков с контентом. После чего у всех элементов удаляется класс active (сделано это для удобства, чтобы не отслеживать наличие данного класса у элементов по отдельности) и добавляется той вкладке, по которой кликнули. Вместе с ней дописывается класс active соответствующему ей блоку с контентом.

Готово!