引導導航丸更新兩個不同的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>