多个独立的导航标签集，没有多个脚本来照顾隐藏点击内容 [英] Multiple independent sets of navigation tabs without multiple scripts to take care of hiding contents on clicks

问题描述

在

如果点击任何标签会显示该标签的内容并保留隐藏其他选项卡的那些。 @BradleyCoupland建议使用以下代码：

 < link rel =stylesheethref =https：//maxcdn.bootstrapcdn。 COM /引导/ 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> [介绍文字]< / div> 
< br> 
< br> 
< ul class =nav nav-tabs> 
 
< a>< a data-toggle =tabhref =＃Cspoileronclick =openPage（'Cspoiler'）> Campbell version< / a>< / li> 
< / ul> 
< div id =Vspoilerclass =tab-pane tabcontent active> 
< br> 
< table> 
< tbody> 
< tr> 
< td> 
< div class =columnstyle =padding-left：80px> 
 [标签1第1列的内容] 
< / div> 
< / td> 
< td> 
< div class =columnstyle =padding-left：80px> 
 [标签2第2栏的内容] 
< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< div id =Cspoilerclass =tab-pane tabcontent> 
< br> 
< table> 
< tbody> 
< tr> 
< td> 
< div class =columnstyle =padding-left：80px> 
 [标签2第1列的内容] 
< / div> 
< / td> 
< td> 
< div class =columnstyle =padding-left：80px> 
 [标签2第2栏的内容] 
< / div> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
 
< script> 
函数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> 部分两次，结果是第二组选项卡在加载时没有显示任何内容，并且点击任何标签集中的标签将在其集合中做正确的事，但隐藏另一个标签集的所有标签。例如，点击奇怪米更旧的重建将显示您在该图像中看到的该选项卡的内容，但隐藏下面的P.Oxy。版本选项卡的内容。简化上面的代码为一个简单的例子：

 < div style =text-align：justify> Intro< / DIV> 
< br> 
< br> 
< ul class =nav nav-tabs> 
 
< a>< a data-toggle =tabhref =＃Cspoileronclick =openPage（'Cspoiler'）> Campbell version< / a>< / li> 
< / ul> 
< div id =Vspoilerclass =tab-pane tabcontent>< br> 
 Pefanthi 
< / div> 
< div id =Cspoilerclass =tab-pane tabcontent>< br> 
 Abanthi 
< / div> 
< br> 
< br> 
< ul class =nav nav-tabs> 
< li class =active>< a data-toggle =tabhref =＃Vspoiler2id =defaultOpenonclick =openPage（'Vspoiler2'）> Vulgate version< / A>< /锂> 
< a>< a data-toggle =tabhref =＃Cspoiler2onclick =openPage（'Cspoiler2'）> Campbell version< / a>< / li> 
< / ul> 
< div id =Vspoiler2class =tab-pane tabcontent>< br> 
 Pefanthi 
< / div> 
< div id =Cspoiler2class =tab-pane tabcontent>< br> 
 Abanthi 
< / div> 
< br> 
< br> 
< link rel =stylesheethref =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> 
函数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> 
  

加载到此：

< a href =https://i.stack.imgur.com/unqk7.png =nofollow noreferrer>

在点击较低的Vulgate版本选项卡时会产生以下结果：

现在这个问题的明显解决方案是通过制作一个完全相同的函数来复制脚本 openPage2 它将一个 2 附加到它的所有内容上，然后使用 openPage2 ， tabcontent2 和 defaultOpen2 ，第二组选项卡和第二组选项卡的no-2版本。现在假设你有两套以上。假设你有10 10个脚本？当然，解决这个问题肯定有一种不那么笨拙的方式？我想也许可以设置一个变量来存储标签的数量，然后为循环创建一个的脚本，这将导致运行所有的 openPage< x> 脚本通过编写单个脚本在正确的时间，但我不知道如何去处理这个。

任何建议？

解决方案

您无需使用 javascript 关闭/切换导航标签， bootstrap 内置此功能。是因为在html中缺少一些东西。您需要将 div 中的所有标签内容用 class =tab-content包装，如下所示：

 < ul class =nav nav-tabs> 
 <！ - 将数据切换属性添加到锚点 - > 
< li class =active>< a data-toggle =tabhref =＃home>主页< / a>< / li> 
< li>< a data-toggle =tabhref =＃menu1>菜单1< / a>< / li> 
< li>< a data-toggle =tabhref =＃menu2>菜单2< / a>< / li> 
< / ul> 
< div class =tab-content> <！ - 所有标签内容的包装 - > 
< div id =homeclass =tab-pane fade in active> 
< h3> HOME< / h3> 
< p>一些内容。< / p> 
< / div> 
< div id =menu1class =tab-pane fade> 
< h3>菜单1< / h3> 
< p>菜单1中的某些内容。< / p> 
< / div> 
< div id =menu2class =tab-pane fade> 
< h3>菜单2< / h3> 
< p>菜单2中的一些内容。< / p> 
< / div> 
< / div> 
  

以下是一个现场演示，其中包含以上两个片段：

https://www.bootply.com/WuuHKy9jwR

In a previous question, I asked how to achieve something like this:

Where clicking any tab would reveal the contents of said tab and keep those of other tabs hidden. @BradleyCoupland suggested the following code:

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

And it worked like a charm. But suppose I now want to do multiple independent sets of tabs, like this:

I tried just copy-pasting the <ul> part twice, and the result was that the second set of tabs showed nothing on loading, and clicking on a tab in any tab set would do the right thing in its set, but hide all the tabs of the other set as well. For example, clicking on "weird-meter older reconstruction" would show what you see in the image for that tab, but hide the contents of the "P.Oxy. version" tab below. Simplifying the code above to a minimal example:

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

Which loads to this:

And where clicking the lower "Vulgate version" tab produces this:

Now the obvious solution to this problem is to duplicate the script, by making an otherwise identical function openPage2 which appends a 2 to everything it works with, and then use openPage2, tabcontent2 and defaultOpen2 for the second set of tabs and the no-2 versions for the first one. Now suppose you have more than 2 sets. Say you have 10. 10 scripts? Surely there must be a less clumsy way of fixing this problem? I was thinking maybe one could set a variable to store the number of tabs and then make a script with a for loop that would result in running all the openPage<x> scripts at the right time by writing a single script, but I'm not sure how to go about this.

Any suggestions?

解决方案

You don't need to use javascript to close/toggle the nav-tabs, bootstrap has this functionality built in. The reason why it's not working out of the box is because there are a few things missing in the html. You need to wrap all the tab content inside a div with class="tab-content" as shown below:

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

Here is a live demo stacking two of the snippets above:
https://www.bootply.com/WuuHKy9jwR

这篇关于多个独立的导航标签集，没有多个脚本来照顾隐藏点击内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！