Создание вкладок с помощю CSS и JavaScript

12-03-2010

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

Шаг 1

Во первых нам нужно создать в Фотошопе конечное результат наших мучений т.е. подобрать цвета, размеры, расположение чтобы в дальнейшем на ходу ничего не нужно было придумывать. Если честно то я не сам подбирал цвета и т.д. так как дизайнер из меня никудышный. Короче вот то что мы будем делать в PSD формате можете его даже скачать:

Vkladki-Css

Шаг 2

Следующим шагом нам нужно создать хотя бы приблизительную Html верстку, которая вглядит следующим образом:

<div>
	<h4>Heading</h4>
    <div>

        <ul>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
            <li><a>Tab</a></li>
        </ul>

        <div>Content for Tab 1</div>
        <div>Content for Tab 2</div>
        <div>Content for Tab 3</div>

    </div>

</div>

Здесь мы заключили все в тег <div> для последующего перемщения его в любое место нашего сайта. Также использовали для заголовка тег <h4>, а для вкладок использовали список, далее находятся три дива в них будет располагать контент вкладок.

Шаг 3

Добовляем к нашему Html Css, надеюсь подключение CSS в HTML не нужно описывать. После чего выделяем и сохранияем фон из PSD документа как отдельное изображение в той же директории где и Html, я обозвал свою фоновую картинку backraund.jpg. Далее прописываем для body следующее:

body {
	background-image:url(background.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}

Здесь мы указали для body фон, расположение фона, убрали повторение, также указали фоновый цвет то есть фон за картинкой.

Шаг 4

Далее мы добавляем к каждому элементу свои классы и идентификаторы для дальнейшей манипуляции ими с помощю CSS и JavaScript то есть class и id, где это необходимо:

 <div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Archives</a></li>
            <li><a href="" id="tab_2">Topics</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>

        <div id="content_1" class="content">Content for Tab 1</div>
        <div id="content_2" class="content">Content for Tab 2</div>
        <div id="content_3" class="content">Content for Tab 3</div>

    </div>

</div>
 

Единственное что бы я хотел бы здесь отметить это класс active который будут иметь активные вкладки, ну а остальное надеюсь понятно. Сейчас наше все выглядит следующим образом:

Vkladki-Css

Шаг 5

Теперь мы начнем описывать все классы и идентификаторы, а начнем мы с самого верхнего уровня это <div id=”tabbed_box” class=”container”> пропишем ему позицию, так чтобы он стоял в центре нашего экрана:

#tabbed_box {
	margin: 0px auto 0px auto;
	width:300px;
}

Шаг 6

Далее описываем наш заголовок прописываем ему шрифты и т.д. :

.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}

Ну здесь вроде все понятно ничего сложного объяснять ничего не буду поехали дальше.

Шаг 7

Далее описываем внутренний div с классом tabbed_area описываем:

.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;
}

Здесь мы описали границы с размером в 1пиксель и цвета #494e52, также описали для него серый фон и внутренний отступ в 8 пикселей то есть padding.

Шаг 8

Теперь мы наконец то перейдем к вкладкам. Нам нужно будет проделать большой путь перед тем как наши элементы li станут похожи на вкладки:

ul.tabs {
	margin:0px; padding:0px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}

В этом коде описано то что ul с классом tabs не должен иметь не внутренних не внешних отступов, также что li элементы находящиеся в списке с классом tabs не имеют картинок слева которые появляются по умолчанию, также для этих элементов описано такое свойство как display по умолчанию оно равно block, но для того чтобы элементы списка то есть li располагались горизонтально мы display приравниваем inline.

Шаг 9

Конечно наши вкладки выглядят пока не очень, но мы это сейчас исправим, для их позиционирования мы использовали <li> элемент, но для их стилизации будем использовать элемент <a> которые находятся в li:

ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54;
	border-bottom: 1px solid #ffffff;
}

Здесь мы описали элементы <a> установили им фон, определили шрифты, убрали подчеркивание, описали отступы и т.д. Также описали для них Hover то есть при наведении на вкладку курсора фон и границы вкладки будут менять свой цвет. Далее описан класс active он нужен, как я уже упоминал, для выделения активной вкладки. Сейчас все наше дело должно выглядеть следующим образом:

Vkladki-Css

Шаг 10

Следующее что мы должны сделать так чтобы отображался только тот контент вкладка которого сейчас активна для этого нам нужно контенту других вкладок прописать display:none после чего они будут не видны, затем мы с помощью JavaScriptа будем налету менять dispaly:none на dispaly:block ну это потом. Сейчас пока ппишем:

.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54;
}
#content_2, #content_3 { display:none; }

Сейчас наши вкладки выглядят следующим образом:

Vkladki-Css

Шаг 11

Изменяем ul.tabs следующим образом для того чтобы они не пересекались с контентом:

ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}

Шаг 12

Теперь наполняем наши вкладки осмысленным контентом у меня это будут списки ссылок меняем Html код на:

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">

        <ul class="tabs">
            <li><a href="" id="tab_1" class="active">Topics</a></li>
            <li><a href="" id="tab_2">Archives</a></li>
            <li><a href="" id="tab_3">Pages</a></li>
        </ul>

        <div id="content_1" class="content">
        	<ul>
            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>
            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>
            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
            	<li><a href="">Site News <small>6 Posts</small></a></li>
            	<li><a href="">Web Development <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_2" class="content">
        	<ul>
            	<li><a href="">December 2008 <small>6 Posts</small></a></li>
            	<li><a href="">November 2008 <small>4 Posts</small></a></li>
            	<li><a href="">October 2008 <small>22 Posts</small></a></li>
            	<li><a href="">September 2008 <small>12 Posts</small></a></li>
            	<li><a href="">August 2008 <small>3 Posts</small></a></li>
            	<li><a href="">July 2008 <small>1 Posts</small></a></li>
			</ul>
        </div>
        <div id="content_3" class="content">
        	<ul>
            	<li><a href="">Home</a></li>
            	<li><a href="">About</a></li>
            	<li><a href="">Contribute</a></li>
            	<li><a href="">Contact</a></li>
			</ul>
        </div>

    </div>

</div>

Ну и для их красоты пишем им следущие стили:

.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}
.content ul li:last-child {
  border-bottom:none;
}

Я это дело описывать не буду так как это не урок осоздании крассивых списков, тот кто не знает css может просто скопировать код, а тот кто знает все поймет единственное что я бы хотел отметить это .content ul li:last-child с помошью этого мы удбираем последнюю линию в списке, а так как это CSS3 то в старых браузерах и некоторых новых она все таки будет стоять:

Vkladki-Css

Шаг 13

С CSS покончено теперь нам нужно создать всего лишь одну JavaScript Функцию, а вот и она:

function tabSwitch(new_tab, new_content) {

	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById('content_3').style.display = 'none';
	document.getElementById(new_content).style.display = 'block';	

	document.getElementById('tab_1').className = '';
	document.getElementById('tab_2').className = '';
	document.getElementById('tab_3').className = '';
	document.getElementById(new_tab).className = 'active';		

}

Коротко опишем логику функции. Как вы заметили нашей функции нужно передать два значения это new_tab и new_content, так вот передать мы ей должны id нажатой вкладки и соответствующий контент этой вкладки, далее функция убирает у всех вкладок класс active, даже нажатой так как мы не знаем которая вкладка активна, и ставим класс active переданному id тоесть new_tab после чего она становится белого цвета и т.д. Соответсятвенно тоже самое проделываем для контента только мы ему ставим не класс а делаем его видимым, а остольной контент невидимым с помошью dispaly:none;

Последний шаг 14

Теперь нам нужно сделать так чтобы на клике по вкладке выполнялась функция tabSwitch() и передовались ей id текущей вкладки и id соответсвющего вкладке контента, для этого изменяем список вкладок следующим образом:

<ul class="tabs">
    <li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Topics</a></li>
    <li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Archives</a></li>
    <li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Pages</a></li>
</ul>

Вот и все! Смотрим демо.

Imon3.20.2010 03:03
Very Nice article, thought I cannot speak Russian I get the basic idea of what your tutorial is about... site bookmarked
admin3.20.2010 09:03
Кому:Imon  maybe...
Oleg M.5.3.2010 08:05
Автор, поправьте статью, плиз ;)
admin5.4.2010 11:05
Кому:Oleg M.,  В каком именно месте?
    joomla-master7.3.2010 05:07
    Так начиная с 6 шага идет сбой форматирования. А вообще, спасибо за статью ;)
      admin7.3.2010 05:07
      спасибо за поправку... там > забыл )))
JustSmile6.4.2010 03:06
Спасибо огромное!Вы безумно мне помогли))Я попыталась одни вкладки сделать, но ничего из этого не вышло, я уж было совсем отчаялась...и тут решила заглянуть к вам))Всё получилось, спасибо! ;)
oldvovk9.13.2010 05:09
Вкладки - это что-то. Как раз ковыряю для двух блогов. Места меньше, а информации заложить можно столько же. И удобно и выгодно.
Alex12.16.2010 08:12
Блин как раз искал инфу про вкладки, хорошая информация, сейчас по этому методу реализовываю на разрабатываемом сайте вкладки, очень удобная штука и сравнительно не сложный урок, спасибо автору +5. Ну и также предлагаю всем читателям, веб мастерам и дизайнерам сайтов ссылку на хороший архив бесплатных для скачивания векторных клипартов, иконок и прочих графических материалов, сайт только недавно начал свою работу, но уже хватает всего и будет в дальнейшем пополняться, так что милости просим, возможно найдете для себя много полезного - Бесплатный векторный клипарт, иконки, иконки в формате png, ai, eps для оформления дизайна.
serg1.18.2011 07:01
Спасибо. Супер. Классно. Доступно. И, главное, без лишних фраз. А можете мне подсказать, как сделать, чтоб при обновлении страницы открывалась та же вкладка, что и была открыта перед обновлением. Очень нужно. Если что, мой адрес one_agent@rambler.ru
    admin1.18.2011 06:01
    ну можно куки использовать, но если хочешь чтоб но гет параматру открывалась вкладка то подругому... тебе как нужно?
      Андрей Гурылёв12.26.2011 04:12
      А реально сделать, чтоб по гет параметру без пхп?
      dzantiev12.26.2011 05:12
      реально... но придется URL парсить, еще можно через hash то есть в конец урл будет добавляться #tab1 - типо такого, еще можно через history api сделать, но это только современные браузеры поддерживают... как пример history api graph.prootime.ru
Dmitry4.6.2011 01:04
Огромное спасибо! очень понятно все описано
Amir8.19.2011 01:08
Хороший лессон!!!)) Не знал, что через href="" можно указывать путь к функции
Madi12.19.2011 07:12
Спасибо, согласен на счет урока, все грамотно и доступно.
Shtorm8525.18.2012 03:05
Вопрос: Вкладки "Topic" и "Pages" поисковиками google, yandex будут индексироваться через JavaScript? Или только первая вкладка?
Сергей6.6.2012 10:06
Можно вопрос? Внимательно прочитал все, что здесь написано, внес изменения (изменил, как мне нужно, ксс и добавил ещё 1 вкладку) отредактировал функцию для 1 дополнительной вкладки, но ксс для и действует только на одной вкладке, которой по умолчанию присвоен класс active. Возможно, это что-то у вас в коде, возможно (конкретно, в функции), возможно, у меня.
    dzantiev6.6.2012 11:06
    если можно ... скиньте ссылку чтобы посмотреть... так не понятно.
Сергей6.6.2012 03:06
а, все, вопрос исчерпан.
Сергей6.13.2012 06:06
И ещё один вопрос, ссылка href="javascript:tabswitch...;" не участвует в разделе веса между ссылками на странице? Ява - это псевдопротокол, но, на моей памяти подобными ссылками можно загнать вес в "никуда", аналогично действию rel="nofollow".
ms6.25.2012 04:06
как вставить iframe в вкладок
Макс7.17.2012 11:07
Спасибо вам огромное.
Евгений8.19.2012 04:08
Вот же огромнейшее спасибо!:)))) Работает! Я пытался вставлять уже готовые исходники, но всё получалось криво, а вот пошаговый вариант объяснения просто решает. Ещё раз спасибо!:)
Александр10.15.2012 06:10
Спасибо Вам за работу. Но не работает ссылка на файл. Поправьте пожалуйста. Спасибо.
Константин1.2.2013 11:01
Здравствуйте! С наступившим Новым годом! У меня вопрос - как быть, если таких вкладок на странице будет не одна?? столкнулся с такой проблемой... допустим, вкладки предназначаются для отображения свойств товара, то есть табы у нас следующие - "Характеристики", "Фотографии", "Краткое описание" и т.д.... Но в каталоге выводится 10 (к примеру) товаров, и к каждому идут вкладки... а скрипт позволяет выполнить только переключение табов первого товара... вкладки к остальным товарам просто не работают... Подскажите, пожалуйста, каким образом необходимо подправить скрипт, чтобы добиться работоспособности всех вкладок в каталоге
    Дмитрий1.8.2013 03:01
    цикл в php с индкексом к каждой tabbedbox ?
Сергей1.24.2013 01:01
Спасибо большое за пример. Пробовал, всё работает! Но есть проблема. Если в скрипте запрограммировано 3 вкладки, а в html-странице прописать только 1 или 2, то скрипт уже не срабатывает. Как устранить эту проблему?
Сергей1.24.2013 01:01
Простите, забыл добавить для чего нужно. Просто для каждой страницы сайта необходимо разное количество вкладок, иногда больше, иногда меньше, а данный скрипт рассчитан на точное количество, как я понял, поэтому даёт сбой. Разные эксперименты у меня (не программисту) ни к чему не привели :) Спасибо!
Роман2.14.2013 07:02
Спасибо большое! Очень благодарен!
Ислом2.16.2013 07:02
Спасибо!
Vovan3.28.2013 09:03
Для того, чтобы элементы меню (верхнее меню на вашем сайте) плавно меняли оттенок не только при наведении, а и когда отпускаешь, надо прописать transition в свойстве ссылок, а не в свойстве ссылок при нажатии.
    Vovan3.28.2013 09:03
    Надеюсь исправите проблему на сайте (если так не должно быть)
Сергей Ожерельев4.26.2013 02:04
Спасибо. Сейчас буду делать bbcode для форума, как раз пригодится.
Александр11.28.2013 03:11
А можно рассказать о том, что и где поменять в этом примере, чтобы реализовать вариант с боковыми вкладками (слева)?
ОСТАВИТЬ КОММЕНТАРИЙ