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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

<!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;*/
}

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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