Bootstrap按钮选项卡？

Question

我有一个注册页面，分为两个部分。我想要在当前页面隐藏每个部分的内容，并在某人点击这些主要按钮时显示每个部分的内容。这个概念类似于bootstrap选项卡，但我这里没有使用选项卡。这些是简单的bootstrap按钮。我尝试过使用bootstrap类来修改我的代码，但没有成功。我正在使用meteor和react。 图像截图如下：“工作和雇佣按钮”. 这是我的代码：

<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>

有什么想法吗？

- MrWeb

---

为什么要创建自己的带有按钮的选项卡？为什么不使用Bootstrap选项卡并对其进行样式设置，例如：http://www.bootply.com/CrAGi1Btxj - Luuk Skeur

这就是我想要的！谢谢 - MrWeb

抱歉，我误将答案写成了评论，请接受这个答案并关闭问题。谢谢 :) - Luuk Skeur

Answer 1

利用Bootstrap选项卡，并将其样式设置为：

<!-- 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

- Luuk Skeur

Answer 2

您可以随时使用JavaScript：

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

- Anthony