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>