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.

score 52 · Accepted Answer · answered Oct 07 '13 at 13:25

52

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

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

Js Fiddle Demo

answered Oct 07 '13 at 13:25

Sachin

40,216
7
90
102

Thanks For the Help. Now it is working. One more doubt, whether the data-toggle attributes supported in IE8? – Mohamed Hussain Oct 07 '13 at 13:35
2

@MohamedHussain in the twb source code, they're using the jQuery ``attr`` function to read out the ``data-attribute``. This should be supported by most browsers (up until IE6, I think?) and definitely IE8 – Kippie Oct 07 '13 at 13:39
Thanks for this solution and saving me from going crazy. – Paolo Broccardo Sep 12 '17 at 19:39

score 2 · Answer 2 · answered Oct 07 '13 at 13:24

2

try like this :

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})

answered Oct 07 '13 at 13:24

Pascalz

2,348
1
24
25

score 2 · Answer 3 · answered Oct 07 '13 at 13:32

2

As mentioned by @Sachin, you have to specify the data-toggle attribute. Other than that, make sure you correctly fill in your data-targets. These take jQuery selectors, not element ids, when used with `data-target.(link)

answered Oct 07 '13 at 13:32

Kippie

3,760
3
23
38

score 1 · Answer 4 · answered Dec 03 '14 at 14:25

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

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

Bootstrap will init tabs automatically.

If you want to init your tabs maually - you can remove data-toggle="tab" from the layout and itin all tabs separately:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

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

4 Answers4

Linked