Создаём табы в новом проекте
В самом начале назначаем глобальный обработчик событий DOMContentLoaded
Код
window.addEventListener('DOMContentLoaded', () => {
});
});
Алгоритм разработки:
1. Нам понадобится функция, которая будет скрывать ненужные табы.
2. Показать нужный таб
3. Назначить обработчики события на пункты меню "Выберите стиль питания"
Для начала нам понадобится получить классы тех элементов вёрстки, с которыми мы будем взаимодействовать: пункты меню, на которые мы будем кликать, блоки с описанием меню (с классом .tabcontent), родительский элемент, содержащий в себе все пункты меню.
Код
window.addEventListener('DOMContentLoaded', () => {
const tabs = document.querySelectorAll('.tabheader__item');
const tabsContent = document.querySelectorAll('.tabcontent');
const tabsParent = document.querySelector('.tabheader__items');
});
const tabs = document.querySelectorAll('.tabheader__item');
const tabsContent = document.querySelectorAll('.tabcontent');
const tabsParent = document.querySelector('.tabheader__items');
});
Напишем функцию, которая будет скрывать все ненужные нам табы:
Код
function hideTabContent() {
tabsContent.forEach(item => {
item.style.display = 'none';
});
}
tabsContent.forEach(item => {
item.style.display = 'none';
});
}
Помимо того, что мы скрываем все табы, в этой функции мы также будем убирать класс активности для всех пунктов меню.
Код
function hideTabContent() {
tabsContent.forEach(item => {
item.style.display = 'none';
});
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
tabsContent.forEach(item => {
item.style.display = 'none';
});
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
Теперь нам нужна функция, которая будет показывать конкретный таб по выбранному пункту меню
Код
function showTabContent(i) {
tabsContent[i].style.display = 'block';
tabs[i].classList.add('tabheader__item_active');
}
tabsContent[i].style.display = 'block';
tabs[i].classList.add('tabheader__item_active');
}
Вызываем обе эти функции, в вызов функции показывания таба передаём 0, чтобы показать первый таб.
Код
hideTabContent();
showTabContent(0);
showTabContent(0);
Теперь у нас на странице виден первый таб, а в меню соответствующий ему пункт выделен жирным шрифтом.
Примем, что первый таб у нас всегда будет по умолчанию виден, когда страница сайта загружается. Поэтому, вместо того, чтобы передавать в вызов функции этот ноль, мы можем его записать в параметры по умолчанию функции.
Код
function showTabContent(i = 0) {
tabsContent[i].style.display = 'block';
tabs[i].classList.add('tabheader__item_active');
}
hideTabContent();
showTabContent(); // вызываем без аргумента
tabsContent[i].style.display = 'block';
tabs[i].classList.add('tabheader__item_active');
}
hideTabContent();
showTabContent(); // вызываем без аргумента
Используя делегирование событий, назначаем обработчик события на родительский элемент меню, при этом можно воспользоваться для упрощения кода таким лайфхаком: положить event.target в переменную и дальше использовать её.
Мы берём наш псевдомассив tabs и перебираем его, и если target совпадёт с выбранным элементом меню (с пунктом, по которому кликнули), то мы вызываем наши функции hideTabContent() и showTabContent()
Код
tabsParent.addEventListener('click', (event) => {
const target = event.target;
if (target && target.classList.contains('tabheader__item')) {
tabs.forEach((item, i) => {
if (target == item) {
hideTabContent();
showTabContent(i);
}
});
}
});
const target = event.target;
if (target && target.classList.contains('tabheader__item')) {
tabs.forEach((item, i) => {
if (target == item) {
hideTabContent();
showTabContent(i);
}
});
}
});
Небольшая доработка: лучше избегать инлайн-стилей и пользоваться css-классами, а также сделать переключение табов более плавным.
Добавляем новые классы:
Код
.show {
display: block;
}
.hide {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1.0;
}
}
display: block;
}
.hide {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0.1;
}
to {
opacity: 1.0;
}
}
Заменяем в коде наши инлайн-стили на классы, не забывая при этом использовать класс .fade для анимации табов:
Код
function hideTabContent() {
tabsContent.forEach(item => {
item.classList.add('hide');
item.classList.remove('show', 'fade');
});
// убираем класс активности для всех пунктов меню
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
function showTabContent(i = 0) {
tabsContent[i].classList.add('show', 'fade');
tabsContent[i].classList.remove('hide');
tabs[i].classList.add('tabheader__item_active');
}
tabsContent.forEach(item => {
item.classList.add('hide');
item.classList.remove('show', 'fade');
});
// убираем класс активности для всех пунктов меню
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
function showTabContent(i = 0) {
tabsContent[i].classList.add('show', 'fade');
tabsContent[i].classList.remove('hide');
tabs[i].classList.add('tabheader__item_active');
}
Полный код скрипта:
Всего комментариев: 0