• Главная
• Статьи
• Учебники
• Шпаргалки
• Программы
• Контакты

	Категория: jQuery
	Название: Вкладки на jQuery
	Дата добавления: 28-04-2012
	Раз просмотрено: 1377
	Комментарии: 0
	Рейтинг: (3 голоса)

Вкладки на jQuery

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

HTML

Эта разметка является семантической и вполне понятной и доступной даже при беглом просмотре. В ненумерованном списке с id="tabs", будут располагаться наши вкладки. А в блоке contents, в отдельных блоках, будет находиться само содержимое для каждой вкладки. При этом, id блока с контентом, должно соответствовать значению атрибута name наших вкладок.

<ul id="tabs">
  <li><a href="#" name="tab1">Первая</a></li>
  <li><a href="#" name="tab2">Вторая</a></li>
  <li><a href="#" name="tab3">Третья</a></li>
  <li><a href="#" name="tab4">Четвертая</a></li>
</ul>

<div id="content">
  <div id="tab1">…</div>
  <div id="tab2">…</div>
  <div id="tab3">…</div>
  <div id="tab4">…</div>
</div>

CSS

Для описания внешнего вида вкладок на jQuery используйте эти CSS правила:

#tabs {
	overflow: hidden;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#tabs li {
	float: left;
	margin: 0 .5em 0 0;
}

#tabs a {
	position: relative;
	background: #ddd;
	background-image: linear-gradient(to bottom, #fff, #ddd);
	padding: .7em 3em;
	float: left;
	text-decoration: none;
	color: #444;
	text-shadow: 0 1px 0 rgba(255,255,255,.8);
	border-radius: 5px 0 0 0;
	box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after {
	background: #fff;
}

#tabs a:focus {
	outline: 0;
}

#tabs a::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	right: -.5em;
	bottom: 0;
	width: 1em;
	background: #ddd;
	background-image: linear-gradient(to bottom, #fff, #ddd);
	box-shadow: 2px 2px 2px rgba(0,0,0,.4);
	transform: skew(10deg);
	border-radius: 0 5px 0 0;
}

#tabs #current a, #tabs #current a::after {
	background: #fff;
	z-index: 3;
}

#content {
	background: #fff;
	padding: 2em;
	height: 220px;
	position: relative;
	z-index: 2;	
	-moz-border-radius: 0 5px 5px 5px;
	-webkit-border-radius: 0 5px 5px 5px;
	border-radius: 0 5px 5px 5px;
	-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
	box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

jQuery

И наконец, для функционирования вкладок, подключите jQuery и добавьте этот скрипт к вашей странице:

$(document).ready(function() {
	// Прячем все содержимое:
	$('#content div').hide();
	// Активируем первую вкладку:
	$('#tabs li:first').attr('id', 'current');
	// Показываем содержимое первой вкладки:
	$('#content div:first').fadeIn();

	$('#tabs a').click(function(e) {
		e.preventDefault();
		if($(this).closest('li').attr('id') == 'current') {
			// Определение текущей вкладки:
			return
		}
		else {
        	// Прячем все содержимое:
			$('#content div').hide();
			// Сбрасываем id:
			$('#tabs li').attr('id', '');
			// Активируем текущую вкладку:
			$(this).parent().attr('id', 'current');
			// Показываем содержимое текущей вкладки:
			$('#' + $(this).attr('name')).fadeIn();
		}
	});
});

В результате, мы получим вот такие вкладки на jQuery. Демо вы можете посмотреть на этой странице.

Вкладки на jQuery

Это интересно: «Как использовать любой шрифт на сайте».

Ваш комментарий будет первым.