Простой способ создания табов (вкладок) на jQuery

Главная страница / Блог / Простой способ создания табов (вкладок) на jQuery

Демо Скачать

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

Как это работает?

Создайте файл JS с именем tabs_script.js и добавьте в него следующий код:

(function($){
	$(function() {
		$('dl.tab').on('click', 'dt', function () {
			$(this).addClass('active').siblings().removeClass('active'); 
		}).children('dd').each(function () {
			$(this).wrapInner('<div class="tab-content"></div>');
		});
	});
}(jQuery));

Скрипт довольно простой, он отслеживает клик по табу $(‘dl.tab’), добавляет класс .active нажатому табу и удаляет его у всех соседних $(this).addClass(‘active’).siblings().removeClass(‘active’), заключая содержимое дочерних объектов каждого элемента из набора совпавших элементов (включая текстовые блоки) в конструкцию HTML с помощью функции wrapInner().

Создайте файл CSS с именем tabs_style.css и добавьте в него следующий код:

.tab.horizontal {
	width: 100%;
	overflow: hidden;
	font-size: 14px;
	margin: 2em 0;
	zoom: 1;
	padding: 1px;
	position: relative;
}

.tab.horizontal>dt {
	float: left;
	line-height: 2;
	height: 2em;
	border: 1px solid #AAA;
	color: #282D31;
	border-bottom: 0;
	padding: 0 1em;
	position: relative;
	left: 35px;
	margin-right: 3px;
	border-radius: 3px 3px 0 0;
	cursor: pointer;
}

.tab.horizontal>dt:hover, .tab.horizontal>dt.active {
	background-color: #eee;    
}

.tab.horizontal>dt.active {
	z-index: 3;
	cursor: auto;
}

.tab.horizontal>dd {
	float: right;
	width: 100%;
	margin: 2em 0 0 -100%;
	position: relative;
	z-index: 2;
	display: none;
}

.tab.horizontal>dt.active + dd {
	display: block;
}

.tab.horizontal>dd>div.tab-content {
	border: 1px solid #AAA;
	border-radius: 3px;
	padding: 10px;
}

/* Вертикальные vertical*/
.tab.vertical {
    border: 1px solid #AAA;
    border-top: none;
}

.tab.vertical>dd {
    background: #fff;
    display: none;
    width: 100%;
    z-index: 2;
    margin: 0;
}

.tab.vertical>dd>div.tab-content {
    padding: 5px 10px;
    border-top: 1px solid #AAA;
}

.tab.vertical>dt {
    padding: 5px 10px;
    cursor: pointer;
    background-color: #F9F9F9;
	border-top: 1px solid #AAA;
}

.tab.vertical>dt.active, .tab.vertical>dt:hover {
	background-color: #eee;
}

.tab.vertical>dt.active + dd {
    display: block;
}

.tab.vertical {
    margin: 0;
    zoom: 1;
    width: 100%;
}

.tab.vertical>dt.active {
	z-index: 3;
	cursor: auto;
}

Здесь ничего сложного, Вы вправе изменить оформление табов так, как Вам захочется. Обратите внимание, что имеются двойные классы, а именно .horizontalдля горизонтальных табов и .vertical для вертикальных.

Файлы созданы, теперь необходимо создать структуру страницы, для этого создайте файл index.html и добавьте следующий код (также, чтобы всё это у нас работало правильно, убедитесь, что Вы подключили библиотеку jQuery):

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/tabs_script.js"></script>
<link rel="stylesheet" href="/tabs_style.css" type="text/css" />
</head>
<body>
<p>Горизонтальные вкладки</p>
<dl class='tab horizontal'>
    <dt class='active'>Заголовок 1</dt>
    <dd>Текст вкладки</dd>
    <dt>Заголовок2</dt>
    <dd>
        <dl class='tab horizontal'>
            <dt>Заголовок 1</dt>
            <dd>Текст вкладки 1</dd>
            <dt class="active">Заголовок2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
    <dt>Заголовок 3</dt>
    <dd>
        <dl class='tab vertical'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки</dd>
            <dt>Заголовок 2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
</dl>
<p>Вертикальные вкладки</p>
<dl class='tab vertical'>
    <dt class='active'>Заголовок 1</dt>
    <dd>Текст вкладки 1</dd>
    <dt>Заголовок 2</dt>
    <dd>
        <dl class='tab horizontal'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки 1</dd>
            <dt>Заголовок 2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
    <dt>Заголовок 3</dt>
    <dd>
        <dl class='tab vertical'>
            <dt class='active'>Заголовок 1</dt>
            <dd>Текст вкладки 1</dd>
            <dt>Заголовок 2</dt>
            <dd>Текст вкладки 2</dd>
            <dt>Заголовок 3</dt>
            <dd>Текст вкладки 3</dd>
        </dl>
    </dd>
</dl>
</body>
</html>

Как видите, мы используем списки данных DL, DT и DD. Сами табы у нас отделяются друг от друга с помощью тега DL, заголовки табов заключаем в теги DT и соответственно содержимое этих табов у нас находится в тегах DD. На мой взгляд, это достаточно простой способ создания табов.

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

Вы можете ознакомиться с примером работы табов скачав архив из вложения в конце статьи.

Вложения

Пример создания табов (вкладок) на jQuery

Скачать

Простой способ создания табов (вкладок) на jQuery

Как это работает?

Вложения

Комментарии

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