页面加载时,Bootstrap 3活动选项卡不显示

Question

问题:当我加载页面时,活动选项卡不会显示任何内容.只有当我去另一个标签然后回来时它才会这样做.当我重新加载页面时,"活动"选项卡再次为空.

因此,当我加载页面时,"主页"选项卡为空.如果我去'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>

Answer 1

您可以检查HTML使用情况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>