0

Web ページで動的にナビゲーションを作成する関数があります。私が抱えている問題は、上部のナビゲーションボタンをクリックすると機能することです。私が知っているように、ID は 1 回しか使用できません。これが問題です。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 に答える