Question

在a previous question中，我问过如何实现这样的目标：

点击任何标签会显示所述标签的内容并隐藏其他标签的内容。 @BradleyCoupland建议使用以下代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="text-align: justify">[Introduction text]</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent active">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 1]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="Cspoiler" class="tab-pane tabcontent">
    <br>
    <table>
        <tbody>
            <tr>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 1 of tab 2]
                    </div>
                </td>
                <td>
                    <div class="column" style="padding-left: 80px">
                        [Contents of col 2 of tab 2]
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
function openPage(pageName) {
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(pageName).style.display = "block";  
}
document.getElementById("defaultOpen").click();
</script>

它就像一个魅力。但是假设我现在想要做多个独立的选项卡集，例如：

我尝试只复制粘贴<ul>部分两次，结果是第二组标签在加载时没有显示任何内容，点击任何标签集中的标签都会在其设置中做正确的事情，但也隐藏了另一组的所有选项卡。例如，点击＆＃34;奇怪的老式重建＆＃34;将显示您在该选项卡的图像中看到的内容，但隐藏＆＃34; P.Oxy的内容。版本＆＃34;下面的标签。将上面的代码简化为最小的例子：

<div style="text-align: justify">Intro</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler" id="defaultOpen" onclick="openPage('Vspoiler')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler" onclick="openPage('Cspoiler')">Campbell version</a></li>
</ul>
<div id="Vspoiler" class="tab-pane tabcontent"><br>
    Pefanthi
</div>
<div id="Cspoiler" class="tab-pane tabcontent"><br>
    Abanthi
</div>
<br>
<br>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#Vspoiler2" id="defaultOpen" onclick="openPage('Vspoiler2')">Vulgate version</a></li>
    <li><a data-toggle="tab" href="#Cspoiler2" onclick="openPage('Cspoiler2')">Campbell version</a></li>
</ul>
<div id="Vspoiler2" class="tab-pane tabcontent"><br>
    Pefanthi
</div>
<div id="Cspoiler2" class="tab-pane tabcontent"><br>
    Abanthi
</div>
<br>
<br>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>   

<script>
function openPage(pageName) {
    var i, tabcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(pageName).style.display = "block";  

}
document.getElementById("defaultOpen").click();
</script>

加载到此：

点击较低的＆＃34; Vulgate版本＆＃34; tab产生了这个：

现在这个问题的明显解决方案是复制脚本，方法是创建一个相同的函数openPage2，它将2附加到它所使用的所有内容，然后使用openPage2， tabcontent2和defaultOpen2用于第二组选项卡，第二组用于第二组选项卡。现在假设你有两套以上。假设您有10. 10个脚本？当然必须有一个不那么笨拙的方法来解决这个问题？我想也许可以设置一个变量来存储选项卡的数量，然后创建一个带有for循环的脚本，这将导致通过编写单个脚本在正确的时间运行所有openPage<x>脚本，但我不确定该怎么做。

有什么建议吗？

Answer 1

您无需使用javascript来关闭/切换nav-tabs，bootstrap内置了此功能。之所以没有开箱即用，是因为那里是html中缺少的一些东西。您需要使用div将所有标签内容包含在class="tab-content"中，如下所示：

<ul class="nav nav-tabs">
  <!-- add data-toggle attribute to the anchors -->
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content"> <!-- wrapper for all tab content -->
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

这是一个现场演示，堆叠上面的两个片段：
https://www.bootply.com/WuuHKy9jwR

多个独立的导航选项卡集，没有多个脚本来处理隐藏点击内容

1 个答案: