.active Tab state is never removed on navigation

Created by: bpierson

When using a nav or div element with direct a children (as opposed to ul > li > a), the active tab state is never removed from a tab upon navigation.

Ply

<!-- Nav tabs -->
<nav class="nav nav-tabs" role="tablist">
    <a class="nav-link nav-item active" data-toggle="tab" href="#home" role="tab">Home</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#profile" role="tab">Profile</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#messages" role="tab">Messages</a>
    <a class="nav-link nav-item" data-toggle="tab" href="#settings" role="tab">Settings</a>
</nav>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">Home</div>
    <div class="tab-pane" id="profile" role="tabpanel">Profile</div>
    <div class="tab-pane" id="messages" role="tabpanel">Messages</div>
    <div class="tab-pane" id="settings" role="tabpanel">Settings</div>
</div>