连续显示4个选项卡

Question

我们使用下面的代码here创建了2个标签，我需要再创建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

这会是你想要的吗？

＆＃13;

＆＃13;

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

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以添加css规则，如：

.tabs {
    width: 25%;
    float: left;
}

或者你可以使用BS类col-sm-3。

Answer 3

检查出来：

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:table-cell;
        height:45px;
        line-height:45px;
        cursor:pointer;
        background:orange;
        color:white;
        font-size:19px;
        text-align:center;
        padding: 0 10px;
    }
    .tabs:hover{
        text-decoration:underline;
    }
    .tabs.active{
        cursor:default;
    }
    .tabs.active:hover{
        text-decoration:none;
    }
    .tab-nav{
        display:table;
    }
    .tab-text{
        display:none;
        width:90%;
        height:auto;
        padding:5%;
    }
    .tab-text.active{
        display:block;
    }

<div id="tab-nav">
    <div class="tabs active" onclick="changeTab(0)">Product Description</div>
    <div class="tabs" onclick="changeTab(1)">Features</div>
    <div class="tabs" onclick="changeTab(2)">Tags</div>
    <div class="tabs" onclick="changeTab(3)">Reviews</div>
</div>
<div id="tab-container">
    <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>