0

我有一个在网页中动态创建导航的功能。我遇到的问题是，当我单击顶部导航按钮时，它可以工作。据我所知，您只能使用一次 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>
    }
}
4

1 回答 1

3

在我使用 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>
于 2014-10-10T16:17:37.470 回答