Question

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

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

Dynamic Nav-pills在Bootstrap中显示Tab-content

1 个答案: