Переключатель вкладок на 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);
    });
});

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

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

  • Добрый день. Очень красивое и простое решение, но есть одна неприятность: хотелось бы иметь возможность сделать несколько блоков вкладок на одной странице, но абсолютно все вкладки реагируют на любое нажатие (все прячутся, остается только одна). Можно ли это исправить каким-то относительно простым решением или требует глобальных изменений в коде?

  • Добрый день! Данный переключатель адаптивен в мобильных браузерах?

    • Здравствуйте. Данный переключатель не адаптивный.

      • 01.08.2018 13:25

        Спасибо, установил. Действительно оказался, не адаптивный.
        Измените пару строк, в наше время очень актуально =)

  • 17.05.2018 10:58

    Здравствуйте! Воспользовалась Вашим кодом, но вкладки не переключаются. В чём может быть проблема?

    • Здравствуйте. Не видя Вашего кода, трудно назвать причину. Скиньте мне через форму https://alexanderpaukov.com/support/ то, что у Вас получилось.

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

  • 17.02.2015 23:00

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