按鈕的Bootstrap選項卡？

Question

我有一個註冊頁面，分爲兩部分。當有人點擊這些主要按鈕時，我只想顯示隱藏在當前頁面中的每個部分內容。這個概念與引導標籤類似，但我在這裏沒有使用標籤。這些是簡單的引導按鈕。我試圖用我的代碼玩Bootstrap類，但沒有運氣。我正在使用流星並作出反應。 圖片的屏幕截圖。

"Work and Hire Buttons"

這是我的代碼

<div id="signup-top-btn"> 
    <div id="myTabs" role="tablist"> 
     <div className="col-xs-6 signup-work-btn"> 
     <button type="button" className="btn btn-block blue-btn active-btn" 
      data-toggle="tab" 
     > 
      Work 
     </button> 
     </div> 
     <div className="col-xs-6 signup-hire-btn"> 
     <button type="button" className="btn btn-primary btn-block blue-btn" 
      data-toggle="tab" data-target="#employer-signup" 
     > 
      Hire 
     </button> 
     </div> 
    </div> 
    </div> 

任何想法？

Answer 1

利用引導標籤和樣式那些喜歡：

<!-- Nav tabs --> 
    <ul class="nav" role="tablist"> 
    <li role="presentation" class="active"><a href="#work" role="tab" class="btn btn-block blue-btn active-btn" data-toggle="tab">Work</a></li> 
    <li role="presentation"><a href="#hire" class="btn btn-primary btn-block blue-btn" role="tab" data-toggle="tab">Hire</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="work">...my working tab</div> 
    <div role="tabpanel" class="tab-pane" id="hire">...my hiring tab</div> 
    </div> 

Bootply：http://www.bootply.com/CrAGi1Btxj

Answer 2

您可以隨時使用JavaScript：

$('button[data-toggle="tab"]').on('click', function(e){ 
    e.preventDefault(); 
    $('.nav-tabs').find('a[href="' + $(this).data('target') + '"]').click(); 
});