Далее на странице...
- Табы - Смена контента Что такое табы? Как переключаться между контентом?
- Табы - Пример скрипта 1. Скрыть содержимое всего контента 2. Показать содержимое нужного контента 3. Назначить обработчик для табов
- Инлайн стили и классы - CSS-анимация Замена инлайн-стилей классами CSS-анимация при смене контента
Что такое табы и как их использование может быть реализовано в JS?
На веб-странице нередко возникает необходимость вывести большое количество информации.
Чтобы эту информацию не отображать всю сразу, её делят на отдельные части, а затем, как правило, при кликах по ссылкам - выводят только одну порцию этих данных.
Итак, табы (вкладки) – это элемент интерфейса, который позволяет пользователю переключаться между контентом, разбитым на несколько секций.
Это набор ссылок или других HTML элементов, при нажатии на которые - включается видимость какого-либо одного блока с контентом и скрывается отображение другого/их блоков.
Табы используются для экономии места и более удобного представления информации на сайте - по названию таба/вкладки можно определить какое содержимое отобразится на странице, если нажать на неё.
Табы - Смена контента
Исходные код - что мы имеем?
Есть табы (вкладки/ссылки), при клике по которым должна происходить смена контента.
Изначально отображается содержимое только одного "таб-контента". Остальные блоки с аналогичным контентом закомментированы, так как иначе будет нагромождение.
Что нужно сделать?
Написать скрипт/реализовать функционал, согласно которому: при клике по ссылкам - табам, будет происходить смена контента.
Фрагмент HTML-кода
Скачать Архив с исходными данными
<div class="preview">
<div class="bgc_blue"></div>
<div class="container">
<div class="tabcontainer">
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
</div>
</div>
<!-- <div class="tabcontent">
<img src="img/tabs/elite.jpg" alt="elite">
<div class="tabcontent__descr">
Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!
</div>
</div> -->
<!-- <div class="tabcontent">
<img src="img/tabs/post.jpg" alt="post">
<div class="tabcontent__descr">
Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
</div>
</div> -->
<div class="tabheader">
<h3>Выберите стиль питания</h3>
<div class="tabheader__items">
<div class="tabheader__item tabheader__item_active">Фитнес</div>
<div class="tabheader__item">Премиум</div>
<div class="tabheader__item">Постное</div>
<div class="tabheader__item">Сбалансированное</div>
</div>
</div>
</div>
<div class="preview__life">Живи полной жизнью!</div>
</div>
</div>
Исходная страница в Браузере
Далее будет реализована задача Создание табов в JS.
Табы - Пример скрипта
HTML-код
<div class="preview">
<div class="bgc_blue"></div>
<div class="container">
<div class="tabcontainer">
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Фитнес" - это новый подход к приготовлению блюд: больше свежих овощей и фруктов. Для людей, которые интересуются спортом; активных и здоровых. Это абсолютно новый продукт с оптимальной ценой и высоким качеством!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/elite.jpg" alt="elite">
<div class="tabcontent__descr">
Меню “Премиум” - мы используем не только красивый дизайн упаковки, но и качественное исполнение блюд. Красная рыба, морепродукты, фрукты - ресторанное меню без похода в ресторан!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/post.jpg" alt="post">
<div class="tabcontent__descr">
Наше специальное “Постное меню” - это тщательный подбор ингредиентов: полное отсутствие продуктов животного происхождения. Полная гармония с собой и природой в каждом элементе! Все будет Ом!
</div>
</div>
<div class="tabcontent">
<img src="img/tabs/vegy.jpg" alt="vegy">
<div class="tabcontent__descr">
Меню "Сбалансированное" - это соответствие вашего рациона всем научным рекомендациям. Мы тщательно просчитываем вашу потребность в к/б/ж/у и создаем лучшие блюда для вас.
</div>
</div>
<div class="tabheader">
<h3>Выберите стиль питания</h3>
<div class="tabheader__items">
<div class="tabheader__item tabheader__item_active">Фитнес</div>
<div class="tabheader__item">Премиум</div>
<div class="tabheader__item">Постное</div>
<div class="tabheader__item">Сбалансированное</div>
</div>
</div>
</div>
<div class="preview__life">Живи полной жизнью!</div>
</div>
</div>
JavaScript-код
'use strict';
window.addEventListener('DOMContentLoaded', () => {
/* Получаем элементы:
1. Все табы/ссылки
2. Все блоки со сменяемым контентом
3. Родительский DIV для всех табов */
const tabs = document.querySelectorAll('.tabheader__item'),
tabsContent = document.querySelectorAll('.tabcontent'),
tabsParrent = document.querySelector('.tabheader__items');
// Функция - Скрывает все Табы
function hideTabContent(){
tabsContent.forEach(item => {
item.style.display = 'none';
});
// Удаляется Активный класс у Табов
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
// Функция отображает содержимое i-го Таба и...
// ... добавляет Активный класс к i-му Табу
function showTabContent(i = 0){
tabsContent[i].style.display = 'block';
tabs[i].classList.add('tabheader__item_active');
}
// Скрываем все Табы и отображаем содержимое 0-го Таба - см. выше i = 0
hideTabContent();
showTabContent();
// Для родителя Табов, для события клика - назначается обработчик. см. Делегирование событий
tabsParrent.addEventListener('click', (event) => {
const target = event.target; // Для удобства помещаем в переменную target -> event.target
// Самый сложный момент - см. комментарии ниже
if(target && target.classList.contains('tabheader__item')){
tabs.forEach((item, i) => {
if(target == item){
hideTabContent();
showTabContent(i);
}
});
}
});
});
Табы - Результат в Браузере
Здесь HTML-код уже раскомментирован. И написан js-скрипт по созданию табов. Скачать архив с исходниками можно выше.
Рассмотрим алгоритм действий. Какие задачи стояли?
1) Нужна функция, которая скрывает содержимое всех табов (все блоки с "таб-контентом").
2) Требуется показать содержимое нужного таба.
3) Назначить обработчик для самих табов (ссылок/вкладок) которые и будут управлять сменой контента.
Используется делегирование событий и назначается один обработчик событий для родителя (родительский DIV для всех табов), чтобы через него управлять всеми потомками.
Стоит отметить, что сначала назначается глобальный обработчик для события DOMContentLoaded.
Нововведение стандарта ES6 - Устанавливаем значение по умолчанию для i.
Самый сложный момент - см. стр. №40
-
Перебираем все Табы, чтобы выяснить - на каком Табе произошел клик?
-
target (event.target) - таб на котором произошел клик/событие.
-
item - это i-ый таб. И это самое i затем подставляется в функцию showTabContent(), которая отображает этот i-ый таб.
Инлайн стили и классы - CSS-анимация
Кроме этого, не всем нравится "резкое" переключение табов (смена таб-контента). Можно добавить css-анимацию.
Сначала добавляем новые стили в файл style.css.
CSS-код
.show{
display: block;
}
.hide{
display: none;
}
.fade{
animation-name: fade; /* Добавляем Анимацию с именем fade */
animation-duration: 1.5s; /* Продолжительность Анимации 1.5 секунды */
}
@keyframes fade{ /* Эффект для Анимации с именем fade */
from{
opacity: 0.1; /* ... от прозрачности 0,1 */
}
to{
opacity: 1; /* ... до прозрачности 1 */
}
}
Вносим изменения в js-файл
Оптимизация кода - Добавляем классы
1) Вместо строки №15 item.style.display = 'none'; из JS-кода выше.
Добавляем JS-код
item.classList.add('hide');
item.classList.remove('show');
Теперь чтобы скрыть все Табы - нужно для каждого Таба вместо инлайн-стиля style.display = 'none';: добавить класс hide и удалить класс show.
2) Редактируем строку №27 tabsContent[i].style.display = 'block'; из JS-кода выше.
Новый JS-код
tabsContent[i].classList.add('show');
tabsContent[i].classList.remove('hide');
Теперь чтобы отобразить содержимое i-го Таба - нужно для i-го Таба вместо инлайн-стиля style.display = 'block';: добавить класс show и удалить класс hide.
Что касается замены инлайн-стилей классами - на этом ВСЁ. При этом результат в браузере будет тот же, что и ранее в примере выше (изменился лишь js-код).
Добавляем Анимацию
В нашем случае, чтобы добавить Анимацию нужно: там, где добавляется класс show - добавить класс fade. И, соответственно, при удалении класса show - также удаляется и класс fade.
Итоговый JS-код
'use strict';
window.addEventListener('DOMContentLoaded', () => {
/* Получаем элементы:
1. Все табы/ссылки
2. Все блоки со сменяемым контентом
3. Родительский DIV для всех табов */
const tabs = document.querySelectorAll('.tabheader__item'),
tabsContent = document.querySelectorAll('.tabcontent'),
tabsParrent = document.querySelector('.tabheader__items');
// Функция - Скрывает все Табы
function hideTabContent(){
tabsContent.forEach(item => {
// Добавляем класс hide. Удаляем класс show и Анимацию fade
item.classList.add('hide');
item.classList.remove('show', 'fade');
});
// Удаляется Активный класс у Табов
tabs.forEach(item => {
item.classList.remove('tabheader__item_active');
});
}
// Функция отображает содержимое i-го Таба и...
// ... добавляет Активный класс к i-му Табу
function showTabContent(i = 0){
// Добавляем класс show и Анимацию fade. Удаляем класс hide
tabsContent[i].classList.add('show', 'fade');
tabsContent[i].classList.remove('hide');
tabs[i].classList.add('tabheader__item_active');
}
// Скрываем все Табы и отображаем содержимое 0-го Таба - см. выше i = 0
hideTabContent();
showTabContent();
// Для родителя Табов, для события клика - назначается обработчик. см. Делегирование событий
tabsParrent.addEventListener('click', (event) => {
const target = event.target; // Для удобства помещаем в target -> event.target
// Самый сложный момент - см. комментарии в примере выше...
if(target && target.classList.contains('tabheader__item')){
tabs.forEach((item, i) => {
if(target == item){
hideTabContent();
showTabContent(i);
}
});
}
});
});
Табы - Добавляем Анимацию - Результат в Браузере
Итак, здесь при создании Табов в JS вместо инлайн-стилей были добавлены классы. А также добавлена Анимация при переключении содержимого Табов.
