동일한 페이지에 여러 탭을 부트 스트랩하고 하나의 탭만 표시

Question

동일한 페이지에 여러 개의 부트 스트랩 탭이 있습니다. 하나의 탭을 클릭하면 모든 내용이 제대로 작동합니다 (내용이 표시됨). 하지만 한 탭이 ​​활성화되어있을 때 다른 탭을 숨기려고합니다. 이 일을 할 수있는 방법이 있습니까?

<div class="pane-content-inner"> 
    <div id="guides-tabs"> 
     <ul class="nav nav-tabs tabs-group top"> 
      <li class="col-md-3 study-inn" tabindex="0" class="tab tab-1 "> 
       <a data-toggle="tab" data-target="#1" class="box box-1 jquery-once-6-processed"><span tabindex="0" class="text">Harvard Medical School Overview</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="1" class="tab tab-2"> 
       <a data-toggle="tab" data-target="#2" class="box box-2 jquery-once-6-processed"><span tabindex="1" class="text">Medical Program and Specialities</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="2" class="tab tab-3"> 
       <a data-toggle="tab" data-target="#3" class="box box-3 jquery-once-6-processed"><span tabindex="2" class="text">Medical & Clinical Research</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="4" class="tab tab-4"> 
       <a data-toggle="tab" data-target="#4" class="box box-4 jquery-once-6-processed"><span tabindex="2" class="text">Admissions</span></a> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div id="1" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p> 
       </p> 
      </div> 
      <div id="2" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p> 
       </p> 
      </div> 
      <div id="3" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       </p> 
      </div> 
      <div id="4" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       </p> 
      </div> 
      </p> 
     </div> 
     </p> 
    </div> 
</div> 
<div class="pane-content-inner"> 
    <div id="guides-tabs"> 
     <ul class="nav nav-tabs tabs-group top"> 
      <li class="col-md-3 study-inn" tabindex="5" class="tab tab-5 "> 
       <a data-toggle="tab" data-target="#5" class="box box-5 jquery-once-6-processed"><span tabindex="0" class="text">Residancy</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="6" class="tab tab-6"> 
       <a data-toggle="tab" data-target="#6" class="box box-6 jquery-once-6-processed"><span tabindex="1" class="text">Costs</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="7" class="tab tab-7"> 
       <a data-toggle="tab" data-target="#7" class="box box-7 jquery-once-6-processed"><span tabindex="2" class="text">Medicine Undergraduate National Fees</span></a> 
      </li> 
      <li class="col-md-3 study-inn" tabindex="3" class="tab tab-8"> 
       <a data-toggle="tab" data-target="#8" class="box box-8 jquery-once-6-processed"><span tabindex="2" class="text">Medicine Undergraduate International Fees</span></a> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div id="5" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p> 
       </p> 
      </div> 
      <div id="6" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       <p>Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some Higher education in Norway is comprised of a mixture of both public and private universities. Some are specialized, some comprehensive, and some </p> 
       </p> 
      </div> 
      <div id="7" class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       </p> 
      </div> 
      <div id="8 " class="tab-pane "> 
       <h2>Universities in Norway</h2> 
       </p> 
      </div> 
      </p> 
     </div> 
     </p> 
    </div> 
</div> 

이것은 내가 지금까지 시도한 것입니다 :

$(document).ready(function() { 
    $('.nav li a').click(function(e) { 
     $('.nav li').removeClass('active'); 
     var $parent = $(this).parent(); 
     console.log($parent); 
     if (!$parent.hasClass('active')) { 
      $parent.addClass('active'); 
     } 
     e.preventDefault(); 
    }); 
}) 

Answer 1

추가 JavaScript가 여기에 필요하지 않습니다. 부트 스트랩 기본 코드를 사용하여이를 가능하게 할 수 있습니다.

그냥 각 탭에 대한 식별자의 모든 고유하며 다음과 같은 펜처럼 설정할 수 있는지 확인하십시오

http://codepen.io/mutualdesigns/pen/pbGjbX

<div> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#1" aria-controls="1" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#2" aria-controls="2" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#3" aria-controls="3" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#4" aria-controls="4" role="tab" data-toggle="tab">Settings</a></li> 
    </ul> 

    <!-- Nav tabs --> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation"><a href="#5" aria-controls="5" role="tab" data-toggle="tab">Home</a></li> 
    <li role="presentation"><a href="#6" aria-controls="6" role="tab" data-toggle="tab">Profile</a></li> 
    <li role="presentation"><a href="#7" aria-controls="7" role="tab" data-toggle="tab">Messages</a></li> 
    <li role="presentation"><a href="#8" aria-controls="8" role="tab" data-toggle="tab">Settings</a></li> 
    </ul> 

    <!-- Tab panes --> 
    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="1">1</div> 
    <div role="tabpanel" class="tab-pane" id="2">2</div> 
    <div role="tabpanel" class="tab-pane" id="3">3</div> 
    <div role="tabpanel" class="tab-pane" id="4">4</div> 
    <div role="tabpanel" class="tab-pane" id="5">5</div> 
    <div role="tabpanel" class="tab-pane" id="6">6</div> 
    <div role="tabpanel" class="tab-pane" id="7">7</div> 
    <div role="tabpanel" class="tab-pane" id="8">8</div> 
    </div> 

</div>