在 Bootstrap 中显示选项卡内容的动态导航药丸答案

【问题标题】：Dynamic Nav-pills to show Tab-content in Bootstrap在 Bootstrap 中显示选项卡内容的动态导航药丸
【发布时间】：2014-10-10 14:33:09
【问题描述】：

我有一个在网页中动态创建导航的功能。我遇到的问题是，当我单击顶部导航按钮时，它可以工作。据我所知，您只能使用一次 ID。这就是问题。如何使用类而不是 id 来确保所有导航都正常工作？

提前致谢。有任何问题，请评论，我会尽快回复。

代码是：

function printComments($amb){
    foreach ($amb as $key => $a) {
        <ul class="amb_tool nav nav-pills list-inline amb_tool_pill">
            <li><a data-toggle="pill" href="#amb_info"><span class="glyphicon glyphicon-info-sign"></span></a></li>
            <li><a data-toggle="pill" href="#amb_comm"><span class="glyphicon glyphicon-comment"></span></a></li>
        </ul>
        <div class="tab-content">
            <div id="amb_info" class="tab-pane">
                <div class="well well-sm amb-well">
                    {$a['amb_about']}
                </div>
            </div>
            <div id="amb_comm" class="tab-pane">
                <div class="well well-sm amb-well">
    HTML;
                $html .= outputComments($a['comments']);
    $html .= <<<HTML
                </div>
            </div>
        </div>
    }
}

【问题讨论】：

你可以通过使用 Javascript 观察点击来显示/隐藏标签内容吗？
你也可以使用data-attributes

标签： twitter-bootstrap navigation nav-pills

【解决方案1】：

在我使用 15 年以上的所有选项卡脚本中，选项卡的 id 与选项卡窗格（或等效）的 id 匹配，否则它必须如何知道要打开哪个？使用 Bootstrap，您可以使用类，但如果类不是唯一的，那么一个会触发另一个，反之亦然。参见示例：http://jsbin.com/viziju/1/edit。所以不妨使用 id。

    <!-- Nav tabs with classes -->
  <ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href=".home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href=".profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href=".messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href=".settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

<!-- Tab panes with classes-->
<div class="tab-content">
  <div class="tab-pane active home">home</div>
  <div class="tab-pane profile">profile</div>
  <div class="tab-pane messages">messages</div>
  <div class="tab-pane settings">settings</div>
</div>

【讨论】：