jQuery 使用一个导航标签控制多个标签内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19719653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Control multiple tab-contents with one nav-tabs
提问by intelis
I have a regular Twitter Bootstrap 3tab. What I want to do is to control is to control multipletab-contentcontainer with one nav-tabselement.
我有一个常规的Twitter Bootstrap 3标签。我要做的就是控制tab-content一个nav-tabs元素控制多个容器。
Here is an example: jsfiddle
这是一个例子：jsfiddle
In this example, when I change tabs, only first one is changed. I want for both containers to change, not just first one.
在这个例子中，当我更改选项卡时，只有第一个被更改。我希望两个容器都改变，而不仅仅是第一个。
Thanks!
谢谢！
回答by artgladun
Here I update your jsfiddle
在这里我更新你的jsfiddle
I add the data-targetattribute to a-elements and change ids in second tab-content
我将data-target属性添加到 a-elements 并更改第二个选项卡内容中的 id
I modified this lines,
我修改了这条线，
Yours:
你的：
<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a> </li>
My update:
我的更新：
<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a> </li>
And the second tab-content, Yours:
第二个标签内容，你的：
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
My update:
我的更新：
<div id="myTabContent2" class="tab-content">
<div class="tab-pane fade in active" id="home_else">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile_else">
<p>Content 2.</p>
</div>
</div>
回答by OMNIA Design and Marketing
You should just use a class instead. I just was working on Bootstrap 3 tabbed content inside a modal window. Was trying to get the modal window to open to the correct tab, but I needed two tabs to open, one for the modal header, and one for the content, with extra nab tabs in the footer.
你应该只使用一个类。我只是在模态窗口中处理 Bootstrap 3 选项卡式内容。试图让模态窗口打开到正确的选项卡，但我需要打开两个选项卡，一个用于模态标题，一个用于内容，页脚中有额外的 nab 选项卡。
I used a class and it worked. So, change <div class="tab-pane fade in active" id="home">to <div class="tab-pane fade in active home">and <a href="#home" data-toggle="tab">to <a href=".home" data-toggle="tab">... worked for me.
我使用了一个类并且它起作用了。所以，改变<div class="tab-pane fade in active" id="home">以<div class="tab-pane fade in active home">和<a href="#home" data-toggle="tab">以<a href=".home" data-toggle="tab">...为我工作。
回答by Tushar Gupta - curioustushar
ID must be unique.
ID 必须是唯一的。
Read Two HTML elements with same id attribute: How bad is it really?
阅读 两个具有相同 id 属性的 HTML 元素：它到底有多糟糕？
problem with your code
你的代码有问题
Two elements with id home , profile and myTabContent.
id 为 home 的两个元素，profile 和 myTabContent。
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
<hr>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Content 1.</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Content 2.</p>
</div>
</div>
and
you are giving href="#home"which will target the first element with id.Not all elements with id.
并且您正在给出href="#home"哪个将针对具有 id 的第一个元素。并非所有具有 id 的元素。
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a></li>
</ul>
