Mohamed Hussain Mohamed Hussain - 1 year ago 108
AngularJS Question

Bootstrap Tab is not working when tab with data-target instead of href

I am developing bootstrap tabs with the use of

attribute to match the tab panes instead of using the
attribute, since i am developing angular app(
might spoil my route ).

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-target="home">Home</a></li>
<li><a data-target="profile">Profile</a></li>
<li><a data-target="messages">Messages</a></li>
<li><a data-target="settings">Settings</a></li>

<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>

jQuery(function () {
jQuery('#myTab a:last').tab('show')

Please see this fiddle Where i recreated the whole .

I don't want the bootstrap style to be applied for my tabs, i want only the functionality, i want my styles to applied , is it anyway to stop bootstrap style to be applied?
Please help in this thanks in advance for any help.

Answer Source

Add data-toggle="tab" attribute in your markup

<a data-target="#home" data-toggle="tab">Home</a>

Js Fiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download