使用一个导航选项卡控制多个选项卡内容 [英] Control multiple tab-contents with one nav-tabs

问题描述

我有一个常规的 Twitter Bootstrap 3 标签。我想要做的是控制是用一个 nav-tabs 控制多个
tab-content 元素。

以下是一个示例： jsfiddle

在此示例中，当我更改选项卡时，只更改第一个。

解决方案

div>

这里我更新您的 jsfiddle

我添加

我修改了此行，

您的：

 < li class =active>< a href = #homedata-toggle =tab> C1< / a>< / li> 
< li>< a href =＃profiledata-toggle =tab> C2< / a> < / li> 
  

我的更新：

 < li class =active>< a href =＃homedata-target =＃home，#home_elsedata-toggle =tab> C1< / a& < / li> 
< li>< a href =＃profiledata-target =＃profile，#profile_elsedata-toggle =tab> C2< / a> < / li> 
  

第二个标签内容：Yours：

 < div id =myTabContentclass =tab-content> 
< div class =tab-pane fade in activeid =home> 
< p>内容1.< / p> 
< / div> 
< div class =tab-pane fadeid =profile> 
< p>内容2.< / p> 
< / div> 
< / div> 
  

我的更新：

 < div id =myTabContent2class =tab-content> 
< div class =tab-pane fade in activeid =home_else> 
< p>内容1.< / p> 
< / div> 
< div class =tab-pane fadeid =profile_else> 
< p>内容2.< / p> 
< / div> 
< / div> 
  

I have a regular Twitter Bootstrap 3 tab. What I want to do is to control is to control multiple
tab-content container with one nav-tabs element.

Here is an example: 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!

解决方案

Here I update your jsfiddle

I add the data-target attribute to a-elements and change ids in second tab-content

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>

这篇关于使用一个导航选项卡控制多个选项卡内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！