Menu
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.
586
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 .
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".
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.
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.
Add data-toggle="tab" attribute in your markup
<a data-target="#home" data-toggle="tab">Home</a>
Js Fiddle Demo
184
try like this :
jQuery(function () {
jQuery('#myTab a').on('click', function() {
$(this).tab('show');
});
})
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)
2
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');
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
