Сегодня мы научимся создавать вкладки для сайта. Вкладки являются удобной формой сепарации информации, улучшают читаемость и, как следствие, делают ресурс более привлекательным.
Конечный результат можно посмотреть здесь:
See the Pen Simple Tabs on JS by Alex (@Asmodey) on CodePen.
В данном примере мы разберем как создавать простые вкладки на чистом Java Script. Для того, чтобы обеспечить универсальность кода, вкладки и их содержимое будем обозначать используя классы. В HTML документе наберем следующий код:
|
1 2 3 4 5 6 7 8 |
<div id="tabs"> <div class="tab whiteborder">Tab 1</div> <div class="tab">Tab 2</div> <div class="tab">Tab 3</div> <div class="tabContent">1</div> <div class="tabContent">2</div> <div class="tabContent">3</div> </div> |
Где tabs — блок-обертка, tab — заголовки вкладок, по которым осуществляется клик мышью, tabContent — содержимое вкладок.
Особенностью данного кода является то, что в html коде вкладка и ее содержимое не связаны.
Добавим оформление CSS для вкладок.
|
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 26 27 28 |
#tabs .tab { display: inline-block; /* выстраиваем вкладки в один ряд */ padding: 5px 10px; cursor: pointer; position: relative; z-index:5; } #tabs .whiteborder { border: 1px solid #707070; border-bottom: 1px solid #fff; border-radius: 3px 3px 0 0; } #tabs .tabContent { width: 300px; height: 60px; border: 1px solid #707070; position: relative; top: -1px; z-index:1; padding: 10px; border-radius: 0 0 3px 3px } #tabs .hide { display: none; } #tabs .show { display: block; } |
Как видно, в css введено два класса: hide — который служит для скрытия содержимого вкладки и show который показывает ее. Также есть класс whiteborder — который выделяет активную вкладку.
Как вы уже поняли, мы будем с помощью JS присваивать вкладкам нужные классы CSS, тем самым скрывая или отображая их.
Пишем код в JS
Для начала объявим глобальные переменные tab и tabContent, в которых будут содержаться элементы массива объектов с соответствующими классами.
Скрывать вкладки при первоначальной загрузке будем с помощью JS. При загрузке страницы выполним следующий код:
|
1 2 3 4 5 6 7 8 |
var tab; // заголовок вкладки var tabContent; // блок содержащий контент вкладки window.onload=function() { tabContent=document.getElementsByClassName('tabContent'); tab=document.getElementsByClassName('tab'); hideTabsContent(1); } |
При выполнении данного кода мы получим массив всех вкладок tab и массив объектов с классом tabContent. Также, при загрузке будем выполнять скрытие вкладок, с помощью функции hideTabsContent. Давайте рассмотрим данную функцию подробнее.
|
1 2 3 4 5 6 7 |
function hideTabsContent(a) { for (var i=a; i<tabContent.length; i++) { tabContent[i].classList.remove('show'); tabContent[i].classList.add("hide"); tab[i].classList.remove('whiteborder'); } } |
Функция hideTabsContent запускает цикл от параметра, который указывается при вызове функции до окончания массива tabContent. Затем, каждому элементу tabContent удаляется класс show, прибавляет класс hide удаляет класс отвечающий за активную вкладку whiteborder.
Обратите внимание, мы работаем с двумя уровнями вкладок — c заголовками tab и содержимым tabContent.
Теперь будем обрабатывать клик мышью по заголовку вкладки. Для этого напишем функцию:
|
1 2 3 4 5 6 7 8 |
document.getElementById('tabs').onclick= function (event) { var target=event.target; if (target.className=='tab') { for (var i=0; i<tab.length; i++) { if (target == tab[i]) { showTabsContent(i); break; }}}} |
Данная функция отслеживает все клики мышью, которые происходят внутри области имеющей id=«tabs». Далее проверяется элемент, на котором выполнен клик. Если данный элемент имеет class=«tab»? то запускается цикл, назначение которого выяснить индекс элемента, на котором совершили клик мышью в массиве tab. Очевидно, что данный порядковый номер можно использовать для того, чтобы отобразить нужный элемент tabContent. Как только необходимый элемент найден, цикл запустит функцию showTabsContent и будет остановлен с помощью break.
Осталось рассмотреть функцию showTabsContent
|
1 2 3 4 5 6 7 8 |
function showTabsContent(b){ if (tabContent[b].classList.contains('hide')) { hideTabsContent(0); tab[b].classList.add('whiteborder'); tabContent[b].classList.remove('hide'); tabContent[b].classList.add('show'); } } |
В первой строке, мы проверяем наличие у блока по которому совершили клик класса hide, при наличии данного класса вызывается функция hideTabsContent, которая скрывает все блоки вкладок. Затем, активной вкладке добавляется класс whiteborder, удаляется класс hide и добавляется класс show.
Рекомендуем изучить урок по созданию раскрывающегося меню на JS.
