问题: 当我加载页面时,活动选项卡不会显示任何内容。只有当我去另一个标签然后回来时它才会这样做。当我重新加载页面时,“活动”标签再次为空。
所以, 加载页面时,“主页”选项卡为空。如果我去'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>
答案 0 :(得分:5)
您可以使用HTML
&amp;来检查browser 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>