当页面加载时，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活动选项卡不显示

回答

相关问题