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

Question!

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.



Answers

If you are using data-toggle="tab" - you can remove your js initialization -

By : Azee


This video can help you solving your question :)
By: admin