부트 스트랩 탭에 활성 클래스를 추가하는 방법

Question

bootstap 알약에 문제가 있습니다. 함수에서 nav에 활성 클래스를 추가하고 싶지만 가져 오지는 않습니다.

<div class="container"> 
     <div class="row "> 
      <div class="col-md-12"> 
       <div class="tabs-left"> 
        <ul class="nav nav-tabs col-md-4"> 
         <li><a href="#a" data-toggle="tab"><span>First</span></a></li> 
         <li><a href="#b" data-toggle="tab"><span>Second</span></a></li> 
        </ul> 
        <div class="tab-content col-md-8"> 
         <div class="tab-pane active" id="a"> 
          <div class="col-md-12">first</div> 
         </div> 
         <div class="tab-pane" id="b"> 
          <div class="col-md-12">second</div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
</div> 

당신이 저를 잘 작성 기능을 작성하는 데 도움 수 :

var tabsFn = (function() { 

    function init() { 
    setHeight(); 
    } 

    function setHeight() { 
    var $tabPane = $('.tab-pane'), 
     tabsHeight = $('.nav-tabs').height(); 

    $tabPane.css({ 
     height: tabsHeight 
    }); 
    } 

    $(init); 
})(); 

그리고 HTML 코드 : 여기

는 기능 코드?

Answer 1

여기서 li 태그에 활성 클래스를 추가해야합니다. 아래에 jsfiddle을 추가했습니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
     <div class="row "> 
 
      <div class="col-md-12"> 
 
       <div class="tabs-left"> 
 
        <ul class="nav nav-tabs col-md-4"> 
 
         <li><a href="#a" data-toggle="tab"><span>First</span></a></li> 
 
         <li><a href="#b" data-toggle="tab"><span>Second</span></a></li> 
 
        </ul> 
 
        <div class="tab-content col-md-8"> 
 
         <div class="tab-pane active" id="a"> 
 
          <div class="col-md-12">first</div> 
 
         </div> 
 
         <div class="tab-pane" id="b"> 
 
          <div class="col-md-12">second</div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
     <div class="row "> 
 
      <div class="col-md-12"> 
 
       <div class="tabs-left"> 
 
        <ul class="nav nav-tabs col-md-4"> 
 
         <li class="active"><a href="#a" data-toggle="tab"><span>First</span></a></li> 
 
         <li><a href="#b" data-toggle="tab"><span>Second</span></a></li> 
 
        </ul> 
 
        <div class="tab-content col-md-8"> 
 
         <div class="tab-pane active" id="a"> 
 
          <div class="col-md-12">first</div> 
 
         </div> 
 
         <div class="tab-pane" id="b"> 
 
          <div class="col-md-12">second</div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
</div>