Question

我有三个按钮，每个触发器显示一个相应的面板。我想一次只显示一个面板，但是现在每个按钮都会显示一个面板。因此，单击所有三个按钮可同时显示三个面板。

我正在使用twitter bootstrap，这是我的代码：

 <span data-toggle="buttons-radio">
  <a class="btn btn-sm btn-white pull-right m-r"  data-toggle="class:show" href="#content1"><i class="icon-sitemap"></i> Content1</a>
  <a class="btn btn-sm btn-white pull-right m-r" data-toggle="class:show" href="#content2"><i class="icon-user"></i> Content2</a>
  <a class="btn btn-sm btn-primary pull-right m-r"  data-toggle="class:show" href="#content3"><i class="icon-male"></i><i class="icon-female"></i> Content3</a>
</span>

<aside class="bg-white hide col-lg-6 b-l" id="content1">
 <div>
    <h2>This is content 1</h2>
 </div>
</aside>

<aside class="bg-white hide col-lg-6 b-l" id="content2">
 <div>
    <h2>This is content 2</h2>
 </div>
</aside>

<aside class="bg-white hide col-lg-6 b-l" id="content3">
 <div>
    <h2>This is content 3</h2>
 </div>
</aside>

感谢

托马斯

Answer 1

在bootstrap中，标签以这种方式工作：

http://getbootstrap.com/javascript/#tabs

标签标题显示在顶部，点击它们会显示不同的内容。永远不会同时显示两个选项卡。

Answer 2

尝试将它包装在.btn-group中。

<span class="btn-group">
  //your buttons
</span>

使用twitter bootstrap切换按钮和面板

2 个答案: