按钮的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(); 
});