當頁面加載時，Bootstrap 3活動選項卡不顯示

問題：當我加載我的頁面時，活動選項卡不顯示任何內容。它只有當我去一個不同的標籤，然後回來。當我重新加載頁面時，「活動」選項卡再次爲空。當頁面加載時，Bootstrap 3活動選項卡不顯示

所以，當我加載頁面時，'home'標籤爲空。如果我去'prijslijst'（prijslijst填寫正確）然後回到'home'，'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>

來源

2016-09-15 Mike Lammers

您可以檢查使用HTMLbrowser console &看到發生什麼事，當你回到第一個選項卡（點擊第一個選項卡上）。您需要使用active in而不是active。

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

來源

2016-09-15 14:30:37

當頁面加載時，Bootstrap 3活動選項卡不顯示

回答

相關問題