class="active" managed improperly with data-toggle="tab"
Created by: tomkel
This works:
<div class=navbar navbar-light bg-faded>
<ul class=nav navbar-nav>
<a class=nav-item nav-link active data-toggle=tab href=#start>Start</a>
<a class=nav-item nav-link data-toggle=tab href=#form>Form</a>
<a class=nav-item nav-link data-toggle=tab href=#status>Status</a>
<a class=nav-item nav-link data-toggle=tab href=#reports>Reports</a>
</ul>
</div>
<div class=tab-content>
<div class=tab-pane active id=start>1</div>
<div class=tab-pane id=form>2</div>
<div class=tab-pane id=status>3</div>
<div class=tab-pane id=reports>4</div>
</div>
However when the <ul>
is changed to a <div>
, the active classes are never unset, thus breaking the data-toggle.
This does not work:
<div class=navbar navbar-light bg-faded>
<div class=nav navbar-nav>
<a class=nav-item nav-link active data-toggle=tab href=#start>Start</a>
<a class=nav-item nav-link data-toggle=tab href=#form>Form</a>
<a class=nav-item nav-link data-toggle=tab href=#status>Status</a>
<a class=nav-item nav-link data-toggle=tab href=#reports>Reports</a>
</div>
</div>
<div class=tab-content>
<div class=tab-pane active id=start>1</div>
<div class=tab-pane id=form>2</div>
<div class=tab-pane id=status>3</div>
<div class=tab-pane id=reports>4</div>
</div>