Переключатель вкладок на jQuery

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

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

Для реализации переключателя вкладок уже написано огромное количество jQuery плагинов, помимо этого есть и стандартное решение, написанное на jQuery UI, но я считаю, что для реализации такого простого функционала, совсем нерационально подключать какое-то готовое решение, ведь все это можно написать самому и займет данный код не более 10 строк.

Поэтому данный урок я посвятил созданию переключателя табов на jQuery с абсолютного нуля.

Смотреть видеоурок

HTML

HTML-каркас, наших будущих табов, должен быть таким.

<div class="tabs_box">
    <ul class="tabs_menu">
        <li><a href="#tab1" class="active">Вкладка 1</a></li>
        <li><a href="#tab2">Вкладка 2</a></li>
        <li><a href="#tab3">Вкладка 3</a></li>
    </ul>
    <div class="tab" id="tab1">
        <p>Контент первой вкладки...</p>
    </div>
    <div class="tab" id="tab2">
        <p>Контент второй вкладки...</p>
    </div>
    <div class="tab" id="tab3">
        <p>Контент третьей вкладки...</p>
    </div>
</div>

Тег ul с классом tabs_menu - это заголовки табов, кликая по которым, у нас будет отображаться та или иная вкладка. Класс active, который задан для первой ссылки, означает о том, что первая вкладка является текущей.

Далее идут три тега div с классом tab - это контейнеры, в которых храниться контент, выводимый на соответствующей вкладке. Также у этих блоков есть идентификатор с названиями tab1, tab2 и т.д. Данный ID должен обязательно соответствовать якорю, который указан в атрибуте href у ссылок, прописанных в заголовках табов.

CSS

Теперь добавим немного стилей.

.tabs_box {
	width: 550px;
	background: #fff;
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -175px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

#tab2, #tab3 {
	display: none;
}

.tab {
	padding: 0 10px;
}

.tabs_menu {
	display: table-row;
}

.tabs_menu li {
	display: table-cell;
	width: auto;
}

.tabs_menu li a {
	display: table-cell;
	width: 2000px;
	text-align: center;
	text-decoration: none;
	background: #f8f8f8;
	color: #292929;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
	padding: 10px 0;
}

.tabs_menu li:first-child a {
	border-left: 0;
}

.tabs_menu .active {
	background: #5f84c1;
	color: #fff;
}

jQuery

Каркас мы создали и теперь можно написать jQuery скрипт, который будет отвечать за плавное переключение между вкладками.

$(document).ready(function(){
    $('.tabs_menu a').click(function(e) {
        e.preventDefault();
        $('.tabs_menu .active').removeClass('active');
        $(this).addClass('active');
        var tab = $(this).attr('href');
        $('.tab').not(tab).css({'display':'none'});
        $(tab).fadeIn(400);
    });
});

Вот и все. Видите, как легко мы с вами реализовали переключатель табов и для этого нам не пришлось подключать различные плагины, которые зачастую весят достаточно много.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

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

Добавить комментарийКомментариев (2)

Дмитрий 30 июля 2015 г. в 22:42

Здравствуйте!
А подскажите, пожалуйста, как повесить на вкладки куки, чтобы бегая по страницам сайта, запоминало ту вкладку, которую я выбрал.
Спасибо!
С уважением, Дмитрий.

Ответить

arq12 17 февраля 2015 г. в 23:00

Уважаемый Александр Пауков!
Данное Ваше произведение написано как хороший учитель с душой обучает учеников. Так ученику легко учиться.
Не могли бы Вы точно так же показать, как сделать сайт из трёх частей: верх, средняя часть и нижняя. Средняя часть разделена на левую навигация, и правая контент и, чтобы контент менялся в зависимости от навигации.
Заранее спасибо.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад