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


i developing bootstrap tabs use of data-target attribute match tab panes instead of using href attribute, since developing angular app(href might spoil 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 fiddle http://jsfiddle.net/xfw8t/4/. recreated whole .

i don't want bootstrap style applied tabs, want functionality, want styles applied , anyway stop bootstrap style applied? please in in advance help.

add data-toggle="tab" attribute in markup

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

js fiddle demo


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -