Как сделать вкладки? (Вкладки с помощью Jquery)

В этом уроке я покажу как можно сделать простые вкладки используя библиотеку Jquery. Такие вкладки могут понадобиться при созданий комментариев от различных соц. сетей.

Вкладки делаются достаточно просто. Я разделил создания вкладок на три шага.

Первый шаг

Для создания таких вкладок первым делом вам понадобится подключить библиотеки Jquery. Следующий код необходимо вставить между тэгами head.

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Важный момент если вы будете тестировать пример не на хостинге, то нужно будет дописывать в путь https: т.е. путь будет иметь следующий вид https://code.jquery.com/jquery-1.9.1.js

Второй шаг

Второй момент вам необходимо прописать html-код для вкладок

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Вконтакте</a></li>
		<li><a href="#tabs-2">Facebook</a></li>
		<li><a href="#tabs-3">Комментарий</a></li>
	</ul>
	<div id="tabs-1">
		<p>Комментарий для ВК</p>
	</div>
	<div id="tabs-2">
		<p>Комментарий для Facebook</p>
	</div>
	<div id="tabs-3">
		<p>Комметарий от WordPress</p>			
	</div>
</div>

Третий шаг

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

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-tabs {
	position: relative;
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {	
	border-top: 1px solid #CCCCCC;
	display: block;	
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1.1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Verdana,Arial,sans-serif;
	font-size: 1em;
}
.ui-widget-content {	
	background: #ffffff;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
/*НЕ АКТИВНЫЙ ТАБ*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6;
	font-weight: normal;
	color: #555555;
}

/*ПРИ НАВЕДЕНИЕ НА ТАБ*/
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999;
	background: #dadada;
	font-weight: normal;
	color: #212121;
}
/*АКТИВНЫЙ ТАБ*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff;
	font-weight: normal;
	color: #212121;
}

Готовый пример — Скачать