Mohamed Hussain Mohamed Hussain - 1 month ago 16
AngularJS Question

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

I am developing bootstrap tabs with the use of

data-target
attribute to match the tab panes instead of using the
href
attribute, since i am developing angular app(
href
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>
</ul>

<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>
</div>

<script>
jQuery(function () {
jQuery('#myTab a:last').tab('show')
})
</script>


Please see this fiddle http://jsfiddle.net/xFW8t/4/. 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

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

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

Js Fiddle Demo