Mike Lammers Mike Lammers - 2 months ago 8
HTML Question

Bootstrap 3 active tab doesn't show when page loads

Question:
When I load my page, the active tab doesnt show anything. It only does when I go to a different tab and then back. When I reload the page, the 'active' tab is empty again.

So,
When I load the page, the 'home' tab is empty. If I go to 'prijslijst' (prijslijst is filled correctly) and then back to 'home', 'home' is filled. If I were to reload the page, 'home' is empty yet again.

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

You can check the the HTML using browser console & see what happen when you back to first tab (click on first tab).

You need to use active in instead of 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>
Comments