Bootstrap Nav Tabs: Active Class Doesnt Work

Here's the HTML code:

The Application Process

Solution 1:

If you add the bootstrap JS and get rid of your JS code, it should work:

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><divclass="process"><h2style="text-transform: uppercase;">The Application Process</h2><br><br><divclass="row"><divclass="col-md-3"align="left"><ulclass="nav nav-pills flex-column"id="myTab"role="tablist"><liclass="nav-item active"><aclass="nav-link"data-toggle="tab"href="#home"role="tab"aria-controls="home">Home</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="tab"href="#profile"role="tab"aria-controls="profile">Profile</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="tab"href="#messages"role="tab"aria-controls="messages">Messages</a></li><liclass="nav-item"><aclass="nav-link"data-toggle="tab"href="#settings"role="tab"aria-controls="settings">Settings</a></li></ul></div><divclass="col-md-9"><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">a</div><divclass="tab-pane"id="profile"role="tabpanel">b</div><divclass="tab-pane"id="messages"role="tabpanel">c</div><divclass="tab-pane"id="settings"role="tabpanel">d</div></div></div></div></div>

Hope this helps. :)

Share