javascript - 连续显示 4 个标签

Question

我们使用以下代码创建了 2 个选项卡 here ，我需要再创建 2 个选项卡。我想要如下图:

window.changeTab = function(tabNum){
        tablinks = document.getElementsByClassName("tabs");
        for(i = 0; i < tablinks.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" active","");
            if(i == tabNum){
                tablinks[i].className += " active";
            }
        }
        tabs = document.getElementsByClassName("tab-text");
        for(i = 0; i < tabs.length; i++){
            tabs[i].className = tabs[i].className.replace(" active","");
            if(i == tabNum){
                tabs[i].className += " active";
            }
        }
    }

.tabs{
        display:inline-block;
        width:250px;
        height:45px;
        line-height:45px;
        cursor:pointer;
        background:orange;
        color:white;
        font-size:19px;
        text-align:center;
    }
    .tabs:hover{
        text-decoration:underline;
    }
    .tabs.active{
        cursor:default;
    }
    .tabs.active:hover{
        text-decoration:none;
    }
    .tab-text{
        display:none;
        width:90%;
        height:auto;
        padding:5%;
    }
    .tab-text.active{
        display:block;
    }

<div id="tab-container">
    <div class="tabs active" onclick="changeTab(0)">Product Description</div>
    <div class="tabs" onclick="changeTab(1)">Features</div>
    <div id="tab-1" class="tab-text active">
        INSERT FIRST TAB CONTENT HERE
    </div>
    <div id="tab-2" class="tab-text">
        INSERT SECOND TAB CONTENT HERE
    </div>
</div>

我想要的是在单行中显示 4 个选项卡。

这样，如果我单击选项卡，它应该会打开相关信息。

请帮我找到解决办法。

提前致谢

Answer 1

这就是您想要的吗？

window.changeTab = function(tabNum){
        tablinks = document.getElementsByClassName("tabs");
        for(i = 0; i < tablinks.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" active","");
            if(i == tabNum){
                tablinks[i].className += " active";
            }
        }
        tabs = document.getElementsByClassName("tab-text");
        for(i = 0; i < tabs.length; i++){
            tabs[i].className = tabs[i].className.replace(" active","");
            if(i == tabNum){
                tabs[i].className += " active";
            }
        }
    }

.tabs{
        display:inline-block;
        width:25%;
        float:left;
        height:45px;
        line-height:45px;
        cursor:pointer;
        background:orange;
        color:white;
        font-size:19px;
        text-align:center;
    }
    .tabs:hover{
        text-decoration:underline;
    }
    .tabs.active{
        cursor:default;
    }
    .tabs.active:hover{
        text-decoration:none;
    }
    .tab-text{
        display:none;
        width:90%;
        height:auto;
        padding:5%;
    }
    .tab-text.active{
        display:block;
    }

<div id="tab-container">
    <div class="tabs active" onclick="changeTab(0)">Product Description</div>
    <div class="tabs" onclick="changeTab(1)">Features</div>
<div class="tabs" onclick="changeTab(2)">Third</div>
<div class="tabs" onclick="changeTab(3)">Fourth</div>
    <div id="tab-1" class="tab-text active">
        INSERT FIRST TAB CONTENT HERE
    </div>
    <div id="tab-2" class="tab-text">
        INSERT SECOND TAB CONTENT HERE
    </div>
    <div id="tab-3" class="tab-text">
        INSERT THIRD TAB CONTENT HERE
    </div>
    <div id="tab-4" class="tab-text">
        INSERT FOURTH TAB CONTENT HERE
    </div>
</div>