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

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

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

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

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

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

<!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>

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

Например, мы имеем ссылку с якорем #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;*/
}

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

  1. антон

    День добрый!Можно вкладки сделать на чистом CSS. А урок хороший.

    • Андрей Кудлай

      День добрый.
      Конечно же, можно и на чистом CSS. Однако, добавив немного jQuery мы получим:
      1) все же более кроссбраузерный вариант… например, полученный вариант будет работать и на IE8… а, возможно, и на IE7 :)
      2) все же продукт с более расширяемым функционалом

  2. Юрий

    Спасибо, как раз про табы искал ифнормацию. Надо было вспомнить как создаются)

  3. Елена

    Спасибо, как всегда — уроки качественные и своевременные.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree