Простые табы (вкладки) на jQuery
В данной статье рассмотрим создание простых вкладок для сайта с использованием минимального количества кода. Делать их будем с помощью библиотеки jQuery, поэтому подключите jQuery к вашему сайту если он еще не подключен.
1. Создадим разметку для табов:
|
1
2
3
4
5
6
7
8
9
10
11
|
<ul class="tabs">
<li class="tabs__item tabs__item tabs__link--active"><a class="tabs__link" href="#" data-title="one">One</a></li>
<li class="tabs__item"><a class="tabs__link" href="#" data-title="two">Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#" data-title="three">Three</a></li>
<li class="tabs__item"><a class="tabs__link" href="#" data-title="four">Four</a></li>
</ul>
<div class="tabs__content" id="one"><p>Контент1</p></div>
<div class="tabs__content" id="two" ><p>Контент2</p></div>
<div class="tabs__content" id="three" ><p>Контент3</p></div>
<div class="tabs__content" id="four"><p>Контент4</p></div>
|
Здесь следует обратить вниманиее что содержимое атрибута data-title ссылки-заголовка вкладки должно совпадать с id вкладки с контентом относящимся к этой вкладке.
2. Стили для табов:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.tabs{
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.tabs__link{
padding: 10px 20px;
text-decoration: none;
color: #0d486a;
font-size: 20px;
display: inline-block;
}
.tabs__link--active .tabs__link{
background: #0d486a;
color:#fff;
}
.tabs__content{
border: 1px solid #0d486a;
padding: 10px 15px;
}
|
3. jQuery для табов:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(".tabs__content").hide(); // скрываем содержимое всех вкладок
$(".tabs__content:first").fadeIn(); //показываем содерживмое второй вкладки
$('.tabs__item').on('click', function () {
$(this).addClass('tabs__link--active').siblings().removeClass('tabs__link--active'); //при клике по текущему элементу добавляем класс и удаляем этот класс у соседнего элемента если он есть
return false;
})
$('.tabs__link').click(function(e) {
e.preventDefault(); //отменяем дефолтное действие
$(".tabs__content").hide(); //скрываем контент вкладок
$('#' + $(this).attr('data-title')).fadeIn(); //показываем вкладку с id соответствующем содержимому атрибута data-title текущего элемента
});
|
Конец.