多个tab-CFANZ编程社区

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 500px;
            margin: 30px auto;
        }
        
        .tab_title {
            display: flex;
        }
        
        .tab_title li {
            list-style: none;
            border: 2px solid red;
            padding: 4px 6px;
            margin-right: 5px;
            cursor: pointer;
            border-bottom: none;
        }
        
        .tab_title li.current {
            background: red;
            color: #fff;
        }
        
        .tab_content {
            border: 2px solid rgb(233, 171, 171);
            min-height: 240px;
            padding: 10px;
        }
        
        .tab_content div {
            display: none;
        }
        
        .tab_content div:first-child {
            display: block;
        }
    </style>
    <script src="index1.js" defer></script>
</head>

<body>
    <div class="container">
        <ul class="tab_title">
            <li class="current">title1</li>
            <li>title2</li>
            <li>title3</li>
            <li>title4</li>
        </ul>
        <div class="tab_content">
            <div>content1</div>
            <div>content2</div>
            <div>content3</div>
            <div>content4</div>
        </div>
        <div class="container">
            <ul class="tab_title">
                <li class="current">title1</li>
                <li>title2</li>
                <li>title3</li>
                <li>title4</li>
            </ul>
            <div class="tab_content">
                <div>content1</div>
                <div>content2</div>
                <div>content3</div>
                <div>content4</div>
            </div>

        </div>
        <div class="container">
            <ul class="tab_title">
                <li class="current">title1</li>
                <li>title2</li>
                <li>title3</li>
                <li>title4</li>
            </ul>
            <div class="tab_content">
                <div>content1</div>
                <div>content2</div>
                <div>content3</div>
                <div>content4</div>
            </div>

        </div>
    </div>


</body>

</html>

var container = document.querySelectorAll(".container")
for (var i = 0; i < container.length; i++) {
    var tab_title = container[i].querySelectorAll(".tab_title li")
    for (var j = 0; j < tab_title.length; j++) {
        tab_title[j].setAttribute("index", j)
        tab_title[j].onclick = function() {
            var current_tab_title = this.parentElement.querySelectorAll("li")
            for (var h = 0; h < current_tab_title.length; h++) {
                current_tab_title[h].className = ''
            }
            this.className = 'current'
            var index = this.getAttribute("index")
            var tab_content = this.parentElement.nextElementSibling.querySelectorAll("div")
            for (var k = 0; k < tab_content.length; k++) {
                if (k == index) {
                    tab_content[k].style.display = "block"
                } else {
                    tab_content[k].style.display = "none"
                }
            }
        }
    }
}

多个tab