Сайт в режиме реконструкции.

Вкладки на jQuery

Метки : jQuery, javascript
Итак, дошла очередь до создания вкладок. Это очень удобный компонент страницы, если есть необходимость разместить несколько элементов в одном месте. Как всегда, сначала создаем разметку. При этом будем считать, что вкладки у нас будут выводиться динамически, каком-нибудь цикле, поэтому все они имеют одинаковые классы. Будем использовать маркированый список, в каждом элементе которого присутствует заголовок вкладки и блок с содержимым вкладки. В конце, после списка находится блок, изначально пустой, в который будем помещать содержимое активой владки.
  • tab 1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quae temporibus hic nihil culpa dolores consequatur cumque placeat dolore architecto quaerat iusto est inventore tempora ratione porro saepe assumenda quidem voluptatibus repellat numquam tempore illo ipsam!
  • tab 2

    Pariatur explicabo enim labore necessitatibus eius autem tempora est numquam adipisci aspernatur qui id consequuntur cupiditate sit fugit. Nemo esse culpa fuga earum saepe aperiam nesciunt dolorem ipsum error rerum in voluptates sint! Debitis id magnam.
  • tab 3

    Reiciendis nihil ipsa ut repudiandae impedit inventore harum nesciunt consequuntur eaque odio aliquam beatae rem officiis dicta culpa quaerat illo eum illum minus recusandae perspiciatis labore debitis nulla maiores temporibus voluptates cumque facilis obcaecati autem! Quia!
  • tab 4

    Placeat sit consequatur explicabo voluptatum optio sapiente ipsam amet laudantium sint voluptates! Dolores at consequatur quidem optio odit ratione nesciunt dolore aliquam aspernatur possimus. Ducimus animi aspernatur eaque similique officiis dolore earum quas amet velit quisquam.
Теперь стили
/*
Обнуляем отступы для всех элементов на странице
*/
*{
	margin: 0;
	padding: 0;
}
/*
Дальше должно быть понятно ))
*/
.tabs-wrapper{
	width: 600px;
	margin: 60px auto;
}
.tab{
	float: left;
	list-style: none;
	display: block;
}
h3.tab-title{
	font-size: 15px;
	font-weight: normal;
	color:#fff;
	background: #c3c3c3;
	padding: 3px 12px;
	margin-right: 10px;
	border-radius: 5px 5px 0 0;
	cursor: pointer;

	transition: all 150ms linear;
	-o-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	-webkit-transition: all 150ms linear;
}
h3.tab-title:hover,
h3.tab-active{
	background: #656565;
}
.tab-content{
	display: none;
}
.tab-show{
	background: #656565;
	padding: 10px 15px;
	clear: both;
	color: #fff;
}
	
А дальше небольшой скрипт на jQuery, не забудьте подключить библиотеку.
$(document).ready(function(){
		// Действие при загрузке страницы
		// Присваиваем активный класс заголовку первой вкладки
		$('.tab-title:first').addClass('tab-active');
		// Получаем скрытое содержимое первой вкладки и записываем его в видимый блок
		var tabText1 = $('.tab-content:first').html();
		$('.tab-show').html(tabText1);
		// Действие при клике
		$('.tab-title').click(function(){
			var tabText = $(this).next('.tab-content').html();
			$('.tab-title').removeClass('tab-active');
			$(this).addClass('tab-active');
			$('.tab-show').html(tabText);
			return false;
		})
	})
	
Ну, а то, что получилось, можно посмотреть здесь

Просмотров 2786

Комментарии (0)







Добавить новый комментарий: