Приветствую всех!
Есть проблема с адаптацией табов.
На сайте 7 основных категорий + 1 категория с названием "Другое".
В категории "Другое" - 5 подкатегорий, решено было сделать их с помощью табов, т.к. категории слишком малы, чтобы выделять под них отдельные CSS файлы, я посчитала это расточитльством.
Табы прилично себя ведут только на десктопной версии и при уменьшении до 735, дальше вкладки табов начинают наползать на содержимое сверху. Не могу понять, как так происходит. При добавлении position absolute ситуация не улучшается. Может быть, структура табов не подходящая? HTML:
<div class="container-tabs">
<div class="tabs-top_line"></div>
<ul class="container-tabs_inner">
<li class="tab tab--active">Бронза, чугун</li>
<li class="tab">Мебель</li>
<li class="tab">Елочные игрушки</li>
<li class="tab">Брендовые ручки</li>
<li class="tab">Книги</li>
</ul>
<div class="container-tabs">
<div class="content content--active">
</div>
</div>
</div>
CSS:
.container-tabs {
max-width: 500px;
min-height: 16em;
margin: 1em auto 0;
max-width: 1114px;
margin: 1em auto 0;
}
.container-tabs_inner {
list-style: none;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
text-transform: uppercase;
color: #AB69FF;
justify-content: center;
}
.container-tabs_inner .tab {
cursor: pointer;
position: relative;
display: block;
margin: 0 -1px 0 0;
padding: 7px 20px 8px;
border-width: 1px 1px 0;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background: none;
}
.container-tabs_inner .tab:hover {
background-color: #f5f5f5;
background: rgba(255, 245, 215, 0.3);
/* text-decoration: underline; */
color: #f5f5f5;
}
.container-tabs_inner .tab--active {
background-color: rgba(255, 245, 215, 0.3);
color: #f5f5f5;
pointer-events: none;
}
.content {
display: none;
padding: 3em;
background-color: #1D1721;
}
.content--active {
display: block;
}
JS:
const tabs = document.querySelectorAll(".tab");
// получаем массив всех блоков с содержимым вкладок
const contents = document.querySelectorAll(".content");
// запускаем цикл для каждой вкладки и добавляем на неё событие
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener("click", ( event ) => {
// сначала нам нужно удалить активный класс именно с вкладок
let tabsChildren = event.target.parentElement.children;
for (let t = 0; t < tabsChildren.length; t++) {
tabsChildren[t].classList.remove("tab--active");
}
// добавляем активный класс
tabs[i].classList.add("tab--active");
// теперь нужно удалить активный класс с блоков содержимого вкладок
let tabContentChildren = event.target.parentElement.nextElementSibling.children;
for (let c = 0; c < tabContentChildren.length; c++) {
tabContentChildren[c].classList.remove("content--active");
}
// добавляем активный класс
contents[i].classList.add("content--active");
});
}
Конечно же, JS код не моего авторства, я взяла готовое решение.
Буду благодарна за любую помощь!
Простой
Простой
