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

Question

我有一个普通的Twitter Bootstrap 3标签。我想做的是控制是用一个nav-tabs元素控制多个
tab-content容器。

这是一个例子: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>