페이지가로드 될 때 부트 스트랩 3 활성 탭이 표시되지 않음

Question

질문 : 내 페이지를로드하면 활성 탭에 아무 것도 표시되지 않습니다. 다른 탭으로 갔다가 돌아올 때만 작동합니다. 페이지를 새로 고침하면 '활성'탭이 다시 비어 있습니다.

그래서, 페이지를로드 할 때 '홈'탭이 비어 있습니다. 내가 'prijslijst'(prijslijst가 올바르게 채워짐)로 이동 한 다음 'home'으로 돌아 가면 'home'이 채워집니다. 페이지를 새로 고침하면 '집'이 다시 비어 있습니다.

HTML :

<section class="no-padding"> 
    <div class="row"> 
     <div class="wrapper-selector"> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Woningselector</a></li> 
       <li role="presentation"><a href="#prijslijst" aria-controls="prijslijst" role="tab" data-toggle="tab">Prijslijst</a></li> 
      </ul> 

      <div class="tab-content"> 
       <!--Selector Tab--> 
       <div role="tabpanel" class="tab-pane fade active" id="home"> 
        <div class="selector" style="position: relative;"> 
         <div id="mapwrapper"> 
          <img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/> 
         </div> 
         <map name="Woningselector" id="mapWoningselector"></map> 
        </div> 
       </div> 
       <!--Prijslijst Tab--> 
       <div role="tabpanel" class="tab-pane fade" id="prijslijst"> 
        {include file="componenten/prijslijst.tpl"} 
       </div> 

      </div> 
     </div> 
    </div> 
</section> 

Answer 1

당신은 확인하실 수 있습니다하여 HTMLbrowser console &이 때 다시 첫 번째 탭 (첫 번째 탭에 클릭)에 일어날 것을 볼 사용.

active 대신 active in을 사용해야합니다.

<section class="no-padding"> 
    <div class="row"> 
     <div class="wrapper-selector"> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" class="active"> 
        <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Woningselector</a> 
       </li> 
       <li role="presentation"><a href="#prijslijst" aria-controls="prijslijst" role="tab" data-toggle="tab">Prijslijst</a></li> 
      </ul> 

      <div class="tab-content"> 
       <!--Selector Tab--> 
       <div role="tabpanel" class="tab-pane fade active in" id="home"> 
        <div class="selector" style="position: relative;"> 
         <div id="mapwrapper"> 
          <img id="Woningselector" alt="Woningselector" usemap="#Woningselector"/> 
         </div> 
         <map name="Woningselector" id="mapWoningselector"></map> 
        </div> 
       </div> 
       <!--Prijslijst Tab--> 
       <div role="tabpanel" class="tab-pane fade" id="prijslijst"> 
        {include file="componenten/prijslijst.tpl"} 
       </div> 

      </div> 
     </div> 
    </div> 
</section>