Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 586
Mohamed Hussain Avatar asked Oct 07 '13 13:10

Mohamed Hussain


People also ask

How do I toggle tabs in bootstrap?

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a . tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class . tab-content .

How do bootstrap tabs work?

Bootstrap tabs separate data in the same wrappers but different panes. Pills are components placed in pages to speed up browsing. Also, the first step of adding links inside navbar is to apply <ul> element together with class="navbar-nav".

What is the use of data target in bootstrap?

data-target is used by bootstrap to make your life easier. You (mostly) do not need to write a single line of Javascript to use their pre-made JavaScript components. The data-target attribute should contain a CSS selector that points to the HTML Element that will be changed.

What is Bootstrap Tab plugin?

Advertisements. Tabs were introduced in the chapter Bootstrap Navigation Elements. By combining a few data attributes, you can easily create a tabbed interface. With this plug-in you can transition through panes of local content in tabs or pills, even via drop down menus.


4 Answers

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

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

Js Fiddle Demo

like image 184
Sachin Avatar answered Oct 21 '22 00:10

Sachin


try like this :

jQuery(function () {
    jQuery('#myTab a').on('click', function() {
        $(this).tab('show');
    });
})
like image 37
Pascalz Avatar answered Oct 21 '22 01:10

Pascalz


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)

like image 2
Kippie Avatar answered Oct 21 '22 00:10

Kippie


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');
})
like image 1
Azee Avatar answered Oct 21 '22 00:10

Azee