如何在 Bootstrap 中设置多个选项卡导航答案

【问题标题】：How to set up multiple tabs navs in Bootstrap如何在 Bootstrap 中设置多个选项卡导航
【发布时间】：2015-08-19 18:42:01
【问题描述】：

我正在尝试实现一个数据列表，其中每个项目都有一个选项卡（实际上是药片）菜单。问题是，当我这样做时，它们会相互干扰，即使它们有不同的 id，一次也只能有 1 个活动标签。

这是我的做法：

首先，我有一个选项卡/药丸菜单，用于列表中的一项：

<div class='col-md-12'>
    <div class='row'>
        <div class='col-md-12' style='margin-top: -50px;'>
            <ul class='nav nav-pills'>
                <li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a></li>
                <li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a></li>
                <li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a></li>
            </ul>
        </div>
    </div>
</div>

这里是保存相关数据的内容 div：

<div id='vis_opgave1' class='tab-pane fade in active'>
    <div class='row'>
        aaaaaaaa11111111111
    </div>
</div>

<div id='rediger_opgave1' class='tab-pane fade'>
    <div class='row'>
        bbbbbbb11111111
    </div>
</div>

<div id='admin_opgave_billeder1' class='tab-pane fade'>
    <div class='row'>
        cccccccccc1111111
    </div>
</div>

我创建了一个 jsfiddle 来向您展示问题：http://jsfiddle.net/kx96pndg/

当其中一个选项卡被选中时，您可以看到另一个导航菜单的活动内容消失了。

我真的希望有人可以在这里帮助我。任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您在选项卡窗格周围缺少<div class="tab-content"></div>。见例子。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div class='col-md-12'>
    <div class='row'>
      <div class='col-md-12' style='margin-top: -50px;'>
        <ul class='nav nav-pills'>
          <li class='active'><a data-toggle='tab' href='#vis_opgave1'>Vis opgave</a>

          </li>
          <li><a data-toggle='tab' href='#rediger_opgave1'>Rediger Tekst</a>

          </li>
          <li><a data-toggle='tab' href='#admin_opgave_billeder1'>Administrer billeder</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div id='vis_opgave1' class='tab-pane fade in active'>
      <div class='row'>aaaaaaaa11111111111</div>
    </div>
    <div id='rediger_opgave1' class='tab-pane fade'>
      <div class='row'>bbbbbbb11111111</div>
    </div>
    <div id='admin_opgave_billeder1' class='tab-pane fade'>
      <div class='row'>cccccccccc1111111</div>
    </div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div class='col-md-12'>
    <div class='row'>
      <div class='col-md-12' style='margin-top: -50px;'>
        <ul class='nav nav-pills'>
          <li class='active'><a data-toggle='tab' href='#vis_opgave2'>Vis opgave</a>

          </li>
          <li><a data-toggle='tab' href='#rediger_opgave2'>Rediger Tekst</a>

          </li>
          <li><a data-toggle='tab' href='#admin_opgave_billeder2'>Administrer billeder</a>

          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div id='vis_opgave2' class='tab-pane fade in active'>
      <div class='row'>aaaaaaaa22222222</div>
    </div>
    <div id='rediger_opgave2' class='tab-pane fade'>
      <div class='row'>bbbbbbb222222222</div>
    </div>
    <div id='admin_opgave_billeder2' class='tab-pane fade'>
      <div class='row'>cccccccccc2222222</div>
    </div>
  </div>
</div>

【讨论】：

Oooohhh 对.. 我不敢相信我错过了。非常感谢@vanburenx :) 接受并 +1
偶尔会发生在我们所有人身上，不客气！

【解决方案2】：

我认为你可以使用这个插件。 bootstrap-multitabs

【讨论】：

始终欢迎提供潜在解决方案的链接，但如果链接不再可用，请为未来的访问者添加一些详细信息。