Создаем вкладки на JS (часть 2)
Во избежание ошибок в работе скрипта, убедимся, что DOM-дерево построено. Для этого повесим, обработчик на событие окна браузера, DOMContentLoaded. После построения DOM-структуры документа (теги), начнет работу callback функция.
window.addEventListener('DOMContentLoaded', function() {
//...код скрипта создания табов
});
Программируем вкладки на JS
В первой части урока мы создали HTML структуру и задали внешнее оформление табам. Теперь переходим непосредственно к программированию. У нас есть табы с контентом, ссылки-заголовки для табов и их родитель. Давайте получим эти элементы из документа и поместим их в переменные. Родителя мы получим методом querySelector, поскольку он один на странице. Вкладки и ссылки находятся не в единственном числе, поэтому получим их через метод querySelectorAll.
let tab = document.querySelectorAll('.header-tab'),
header = document.querySelector('.header'),
tabContent = document.querySelectorAll('.tabcontent');
Нам нужно скрыть на странице все вкладки с контентом, кроме одной первой. При переключении между вкладками, одни табы должны скрываться, а другие показываться. В CSS мы создали два специальных класса hide (display: none) и show (display: flex). Напишем функцию, которая скроет все вкладки на странице. Функция будет принимать один технический аргумент (x). В настройках условия цикла, присвоим аргумент (x) переменной итератору (i). Тело функции выполняется, пока верно условие - (i) меньше длины табов. Таким образом, все вкладки скроются со страницы.
function hideTabContent(x) {
for (let i = x; i < tabContent.length; i++) {
tabContent[i].classList.remove('show');
tabContent[i].classList.add('hide');
}
}
hideTabContent(1);
Однако, самый первый таб нам нужно оставить видимым. Для этого вызовем функцию и передадим ей 1. Единица подставиться вместо (x), а наш цикл начнет свой отсчет не с нуля, а с единицы. А это значит, что классы show / hide не будут применяться к первому табу с нулевым индексом (отсчет в программировании начинается с нуля). При загрузке страницы, первая вкладка всегда будет оставаться раскрытой, поскольку цикл по ней не пройдет.
Функция hideTabContent() надежно запрятала все табы, кроме первого. А теперь напишем новую функцию "антагонист", показывающую вкладки. В аргументах передадим технический параметр (y), чуть позже он нам понадобится при вызове функции. Прописываем условие, если определенная вкладка содержит класс hide (спрятана), то класс hide удаляется и класс show добавляется к ней. Параметр (y) определяет, какую именно вкладку открыть.
function showTabContent(y) {
if (tabContent[y].classList.contains('hide')) {
tabContent[y].classList.remove('hide');
tabContent[y].classList.add('show');
}
}
Переходим к последней части JS кода, где обработчик события зафиксирует, по какой вкладке был сделан клик и после этого запустится callback функция с циклом и условиями. С помощью цикла узнаем, на какую ссылку нажал пользователь и покажем ему соответствующий tabcontent. Но давайте обо всем по порядку.
Привяжем, обработчик события к родителю ссылок-табов (делегирование событий), в аргументах функции передадим объект event. В переменную target поместим цель объекта - event.target. В условии проверяем, что пользователь действительно кликнул по родителю ссылок, то есть целью объекта клика, стал header-tab, то запускается цикл for с определенным набором действий. Что это за действия?
Нам нужно установить связь между ссылкой-табом и самим табом. Если происходит клик по второй ссылке, то и показываться должен второй таб. Для этого переберем в цикле все вкладки в цикле (tab) и сравним с ссылками (target), куда мы кликнули. Если они совпадают, то мы скроем все вкладки, запустив функцию hideTabContent, а покажем только одну вкладку, совпадающую по номеру в счетчике (i).
header.addEventListener('click', function(event) {
let target = event.target;
if (target && target.classList.contains('header-tab')) {
for(let i = 0; i < tab.length; i++) {
if (target == tab[i]) {
hideTabContent(0);
showTabContent(i);
break;
}
}
}
});
Демонстрация работы вкладок на JS
-
Создано 13.12.2019 10:47:36
-
Михаил Русаков
Комментарии (1):
Добрый день! Как при щелчке на вкладку подсвечивать вкладку цветом?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.