gpt4 book ai didi

javascript - Bootstrap 3 事件选项卡在页面加载时不显示

转载 作者:行者123 更新时间:2023-11-28 05:20:24 26 4
gpt4 key购买 nike

问题:当我加载我的页面时,事件选项卡不显示任何内容。只有当我转到另一个选项卡然后返回时才会这样做。当我重新加载页面时,“事件”选项卡再次为空。

所以,当我加载页面时,“主页”选项卡是空的。如果我转到“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>

最佳答案

您可以使用 浏览器控制台 检查 HTML 并查看返回第一个选项卡时发生的情况(单击第一个选项卡)。

您需要使用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>

关于javascript - Bootstrap 3 事件选项卡在页面加载时不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39513677/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com