动态Nav-pills在Bootstrap中显示Tab-content

我有一个动态地在网页中创建导航的功能。我遇到的问题是，当我点击顶部的导航按钮时，它的工作原理。据我所知，你只能使用ID一次。这就是问题。我怎样才能使用类而不是ID来确保所有的导航工作？动态Nav-pills在Bootstrap中显示Tab-content

在此先感谢。任何问题，只是评论，我会在一个快速答复。

的代码是：

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

来源

2014-10-10 cwiggo

您可以通过使用Javascript观看点击来显示/隐藏标签内容吗？ – 2014-10-10 15:08:06

你也可以使用[data-attributes]（http://www.w3schools.com/tags/att_global_data.asp） – HenryW 2014-10-10 15:38:20

在我在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-10 16:17:37 Christina

动态Nav-pills在Bootstrap中显示Tab-content

回答

相关问题