Как поменять табы местами?

Question

Есть табы. Они работают, но если поменять местами область контента и область списка, то табы перестают работать. Подскажите, пожалуйста, что нужно изменить, чтобы не зависимо от того где находится область контента табы переключались?

<ul class="container--tabs">
  <li class="tab tabs--active">Первая</li>
  <li class="tab">Вторая</li>
</ul>

<div class="container--content">
 <div class="content content--active"> 
    1
 </div> 
 <div class="content">
    2
 </div>
</div>

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");

});
}

Answer 1

const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".content");

// добавить каждому элементу tab слушатель события click
tabs.forEach(tab => {
    tab.addEventListener('click', e => clickHandler(e))
})

function clickHandler(e) {
    //если tab имеет class tab--active, то не выполнять логику этой функции
    if(e.target.classList.contains("tab--active")) {return}
    
    // удаление класса tab--active у всех элементов tab, которые имеют класс tab--active
    tabs.forEach(tab => {
        if(tab.classList.contains("tab--active")) {
            tab.classList.remove("tab--active");
        }
    })
    
    // добавить класс tab--active для нажатого элемента
    e.target.classList.add("tab--active");
    
    // forEach перебирает все .content, если у кого-то атрибут data-tab
    // совпадет с атрибутом data-tab нажатого элемента, то добавить класс .content--active
    contents.forEach(content => {
        if(content.dataset.tab === e.target.dataset.tab) {
            content.classList.add("content--active");
        } else {
            content.classList.remove("content--active");
        }
    })
}

.tab {
    border: 1px solid #000;
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}

.tab.tab--active {
    background-color: #ccc;
}

.content {
    border: 1px solid #000;
    padding: 20px;
    font-size: 18px;
    display: inline-block;
    display: none;
}

.content.content--active {
    display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    
    <div class="container--content">
        <div class="content content--active" data-tab="1">
            1
        </div>
        <div class="content" data-tab="2">
            2
        </div>
    </div>
    
    <ul class="container--tabs">
        <li class="tab tab--active" data-tab="1">Первая</li>
        <li class="tab" data-tab="2">Вторая</li>
    </ul>
    
    <div class="container--content">
        <div class="content content--active" data-tab="1">
            1
        </div>
        <div class="content" data-tab="2">
            2
        </div>
    </div>
    
    <script src="scripts.js"></script>
</body>
</html>

БЛОГ НА HUSL

Как поменять табы местами?

Ответы (1 шт):