동적 인 Nav-pills는 부트 스트랩의 탭 내용을 표시합니다.

웹 페이지에서 동적으로 탐색을 만드는 기능이 있습니다. 내가 가지고있는 문제는 상단의 탐색 버튼을 클릭하면 작동한다는 것입니다. 내가 아는 한 당신은 ID를 한 번만 사용할 수 있습니다. 이게 문제 야. ID 대신 클래스를 사용하여 모든 탐색이 작동하는지 어떻게 확인할 수 있습니까?동적 인 Nav-pills는 부트 스트랩의 탭 내용을 표시합니다.

미리 감사드립니다. 어떤 질문이라도, 단지 코멘트와 나는 jiffy로 대답 할 것이다.

내가 15+ 년 동안 사용했던 모든 탭 스크립트에서

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

자바 스크립트를 사용하여 클릭 수를 보면서 탭 콘텐츠를 표시하거나 숨길 수 있습니까? –

[data-attributes] (http://www.w3schools.com/tags/att_global_data.asp)를 사용할 수도 있습니다. – HenryW

이 탭의 ID가 탭 창 (또는 당량)의 ID와 일치하고, 그렇지 않으면 다음을 수행해야합니다

코드는 어느 것이 열리는지 어떻게 알 수 있습니까? 부트 스트랩을 사용하면 클래스를 사용할 수 있지만 클래스가 고유하지 않으면 다른 클래스가 트리거되며 그 반대의 경우도 마찬가지입니다. 예 : 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는 부트 스트랩의 탭 내용을 표시합니다.

답변

관련 문제