引导导航丸更新两个不同的div

Question

我想设计一个网页，这将是这样的：

------------------------- 
| top banner    | 
------------------------- 
| nav-pill menu   | 
------------------------- 
| content area   | 
|      | 
------------------------- 

要导航我使用的引导丸。我想导航菜单按钮来更改顶部横幅和内容区域。

到目前为止我的代码： 顶部横幅：

<div class="tab-content"> 
<div id="menu1a" class="tab-pane fade in"> 
    <span>Test 1</span> 
</div> 
<div id="menu2a" class="tab-pane fade in"> 
    <span>Test 2</span> 
</div> 
</div> 

丸：

<ul class="nav nav-pills" style="display: inline-block;"> 
<li class="active"> 
    <a data-toggle="pill" role="button" href="#menu1">Menu 1</a> 
</li> 
<li> 
    <a data-toggle="pill" role="button" href="#menu2">Menu 2</a> 
</li> 
<ul> 

内容区域

<div class="tab-content"> 
<div id="menu1" class="tab-pane fade in"> 
    <span>Test 1</span> 
</div> 
<div id="menu2" class="tab-pane fade in"> 
    <span>Test 2</span> 
</div> 
</div> 

基本上我的问题是：是否可以从菜单中的<a data-toggle="pill" role="button" href="#menu1">导航按钮调用两个单独的ID？

我一直在使用onclick="href='#menu1'; href='#menu1a'"尝试以及JQuery的

$(".active").removeClass("active"); 
    $("#menu1a").addClass("active"); 
    $("#menu1").addClass("active"); 

Answer 1

而不是href可以使用data-target靶向由所有要与你的锚切换元件共有的共有类。还要将活动类添加到默认显示的选项卡窗格中。

Bootply
http://www.bootply.com/2LgV53lYVi

标记

<div class="tab-content"> 
    <div id="menu1a" class="tab-pane fade in menu1tab active"> 
     <span>Test 1</span> 
    </div> 
    <div id="menu2a" class="tab-pane fade in menu2tab"> 
     <span>Test 2</span> 
    </div> 
</div> 

<ul class="nav nav-pills" style="display: inline-block;"> 
    <li class="active"> 
     <a data-toggle="pill" role="button" data-target=".menu1tab">Menu 1</a> 
    </li> 
    <li> 
     <a data-toggle="pill" role="button" data-target=".menu2tab">Menu 2</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="menu1" class="tab-pane fade in menu1tab active"> 
     <span>Test 1</span> 
    </div> 
    <div id="menu2" class="tab-pane fade in menu2tab"> 
     <span>Test 2</span> 
    </div> 
</div>