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

【问题标题】：Bootstrap 3 active tab doesn't show when page loads页面加载时不显示 Bootstrap 3 活动选项卡
【发布时间】：2016-09-15 14:27:08
【问题描述】：

问题：当我加载我的页面时，活动选项卡不显示任何内容。仅当我转到其他选项卡然后返回时才会这样做。当我重新加载页面时，“活动”标签再次为空。

所以，当我加载页面时，“主页”选项卡是空的。如果我去“prijslijst”（prijslijst 填写正确）然后回到“家”，“家”被填写。如果我要重新加载页面，'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>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap tabs

【解决方案1】：

您可以使用browser console 检查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>

【讨论】：

active和active in有什么区别？
@Greeshma in 是必要的，因为 fade 类，如果你检查源 bootstrap.css 你会看到 fade 类改变了 @987654330 @ 为 0，因此我们需要 in 类将 opacity 改回 1，以使内容可见。