Создание вкладок (табов). Урок 1

Дата публикации: 2013-10-10

Создание вкладок (табов)

От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.

Библиотека jQuery UI предлагает нам виджет Табы (//jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.

Итак, давайте начнем с разметки, которая может быть примерно такой:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Табы</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	
	<div class="wrapper">
		<div id="tabs">
			<ul id="items">
				<li class="active"><a href="#tabs-1">Таб 1</a></li>
				<li><a href="#tabs-2">Таб 2</a></li>
				<li><a href="#tabs-3">Таб 3</a></li>
			</ul>
		</div>
		<div class="tab-content">
			<div id="tabs-1" class="tabs-text">
				<p>Вкладка 1</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>
			</div>
			<div id="tabs-2" class="tabs-text">
				<p>Вкладка 2</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>
			</div>
			<div id="tabs-3" class="tabs-text">
				<p>Вкладка 3</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>
			</div>
		</div>
	</div>

</body>
</html>

<!doctype html>

<head>

</head>

<body>

</ul>

</div>

<p>Вкладка 1</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

<p>Вкладка 2</p>

</div>

<p>Вкладка 3</p>

</div>

</body>

</html>

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

Например, мы имеем ссылку с якорем #tabs-1. Также у нас есть текст в блоке с идентификатором #tabs-1. Это и есть та самая связь вкладки с ее текстом.

Теперь остается оформить наши табы, добавив несколько стилевых правил в файл стилей:

*{margin: 0; padding: 0;}
.wrapper{
	width: 500px;
	margin: 50px auto;
}
#tabs{
	width: 100%;
}
#tabs ul{
	list-style: none;
	display: table-row;
}
#tabs ul li{
	display: table-cell;
	background: #ccc;
	height: 40px;
	text-align: center;
	border-left: 5px solid #fff;
}
#tabs ul li:first-child{
	border-left: none;
	background: #f3f3f3;
}
#tabs ul li a{
	display: table-cell;
	width: 500px;
	height: 40px;
	line-height: 40px;
	color: #000;
	text-decoration: none;
	font-size: 20px;
}
#tabs ul li a:hover{
	color: #e8117f;
}
.tab-content{
	border: 10px solid #f3f3f3;
}
.tabs-text{
	padding: 10px;
	/*display: none;*/
}

*{margin: 0; padding: 0;}

.wrapper{

width: 500px;

margin: 50px auto;

}

#tabs{

width: 100%;

}

#tabs ul{

list-style: none;

display: table-row;

}

#tabs ul li{

display: table-cell;

background: #ccc;

height: 40px;

text-align: center;

border-left: 5px solid #fff;

}

#tabs ul li:first-child{

border-left: none;

background: #f3f3f3;

}

#tabs ul li a{

display: table-cell;

width: 500px;

height: 40px;

line-height: 40px;

color: #000;

text-decoration: none;

font-size: 20px;

}

#tabs ul li a:hover{

color: #e8117f;

}

.tab-content{

border: 10px solid #f3f3f3;

}

.tabs-text{

padding: 10px;

/*display: none;*/

}

В результате мы получили классические вкладки (табы). Осталось реализовать переключение между вкладками, добавив табам необходимый функционал. В следующем уроке мы с вами напишем несложный скрипт, который реализует необходимый функционал.

На этом текущий урок завершен. До встречи в следующем уроке. Удачи!

Метки: вкладки, табы