使用一个导航标签控制多个标签内容

Question

我有一个常规的Twitter Bootstrap 3选项卡.我想要做的是控制是
tab-content用一个nav-tabs元素控制多个容器.

这是一个例子:jsfiddle

在此示例中,当我更改选项卡时,只更改了第一个选项卡.我希望两个容器都能改变,而不仅仅是第一个.

谢谢!

Answer 1

在这里,我更新你的jsfiddle

我将data-target属性添加到a-elements并更改第二个tab-content中的id

我修改了这条线,

你:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

我的更新:

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

第二个标签内容,你的:

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

我的更新:

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

Answer 2

你应该只使用一个类.我刚刚在模态窗口中处理Bootstrap 3选项卡式内容.试图让模态窗口打开正确的选项卡,但我需要打开两个标签,一个用于模态标题,一个用于内容,页脚中有额外的标签.

我用过一堂课,它起作用了.所以,改变<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">...为我工作.