Как внутри таба сделать еще 2 таба?

Question

Nikitosik1 @Nikitosik1

JavaScript

Как внутри таба сделать еще 2 таба?

Внутри 3 таба нужно сделать еще 2. Кликаешь на 3 таб, а там вместо контента еще 2 таба. Как это реализовать?

const tabs = document.getElementById('tabs')
const content = document.querySelectorAll('.content')

const changeClass = el => {
    for (let i = 0; i < tabs.children.length; i++) {
        tabs.children[i].classList.remove('active')
    }
    el.classList.add('active')
}

tabs.addEventListener('click', e => {
    const currTab = e.target.dataset.btn
    changeClass(e.target)
    for (let i =0; i < content.length; i++) {
        content[i].classList.remove('active')
        if (content[i].dataset.content === currTab) {
            content[i].classList.add('active')
        }
    }
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2.Tabs</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>TABS</h1>
    <div class="tabs-block-wrapper">
        <div id="tabs">
            <div class="tab-btn active" data-btn="1">1</div>
            <div class="tab-btn" data-btn="2">2</div>
            <div class="tab-btn" data-btn="3">3</div>
        </div>
        <div id="contents">
            <div class="content active" data-content="1">Content 1</div>
            <div class="content" data-content="2">Content 2</div>
            <div class="content" data-content="3">Content 3</div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

h1 {
    width: 100%;
    text-align: center;
}
.tabs-block-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}
#tabs {
    display: flex;
}
.tab-btn {
    width: 100px;
    height: 40px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: 5px;
}
.tab-btn.active {
    background-color: blue;
    color: #ffffff;
}

#contents {
    max-width: 300px;
    width: 100%;
    height: 150px;
    border: 1px solid black;
}

.content {
    display: none;
}

.content.active {
    display: block;
}

Вопрос задан более трёх лет назад
2402 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Nikitosik1 @Nikitosik1 Автор вопроса

А можно встроить в мой JS, часть кода который отвечает за табы внутри третьего таба?

Написано более трёх лет назад

Александр @Seasle Куратор тега JavaScript

Nikitosik1,

HTML

<h1>TABS</h1>
<div class="tabs-block-wrapper">
    <div class="tabs">
        <div class="tab-btn active" data-btn="1">1</div>
        <div class="tab-btn" data-btn="2">2</div>
        <div class="tab-btn" data-btn="3">3</div>
    </div>
    <div class="contents">
        <div class="content active" data-content="1">Content 1</div>
        <div class="content" data-content="2">Content 2</div>
        <div class="content" data-content="3">
            <div class="tabs">
                <div class="tab-btn active" data-btn="4">4</div>
                <div class="tab-btn" data-btn="5">5</div>
            </div>
            <div class="contents">
                <div class="content active" data-content="4">Content 4</div>
                <div class="content" data-content="5">Content 5</div>
            </div>
        </div>
    </div>
</div>

CSS

h1 {
    width: 100%;
    text-align: center;
}

.tabs-block-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
}

.tabs {
    display: flex;
}

.tab-btn {
    width: 100px;
    height: 40px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    border-radius: 5px;
}

.tab-btn.active {
    background-color: blue;
    color: #ffffff;
}

.contents {
    max-width: 300px;
    width: 100%;
    height: 150px;
    border: 1px solid black;
}

.content {
    display: none;
}

.content.active {
    display: block;
}

JS

const allTabs = document.querySelectorAll('.tabs');

const changeClass = (tabs, el) => {
    for (let i = 0; i < tabs.children.length; i++) {
        tabs.children[i].classList.remove('active');
    }
    el.classList.add('active');
};

for (const tabs of allTabs) {
    const content = tabs.nextElementSibling.querySelectorAll(
        ':scope > .content'
    );
    tabs.addEventListener('click', (e) => {
        const currTab = e.target.dataset.btn;
        changeClass(tabs, e.target);
        for (let i = 0; i < content.length; i++) {
            content[i].classList.remove('active');
            if (content[i].dataset.content === currTab) {
                content[i].classList.add('active');
            }
        }
    });
}

Написано более трёх лет назад

Ваш ответ на вопрос