Bootstrap Tab is not working when tab with data-target instead of href
Solution 1
Add data-toggle="tab"
attribute in your markup
<a data-target="#home" data-toggle="tab">Home</a>
Solution 2
As mentioned by @Sachin, you have to specify the data-toggle
attribute.
Other than that, make sure you correctly fill in your data-target
s. These take jQuery selectors, not element ids, when used with `data-target
.(link)
Solution 3
try like this :
jQuery(function () {
jQuery('#myTab a').on('click', function() {
$(this).tab('show');
});
})
Solution 4
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');
})
Mohamed Hussain
Senior Front End Developer, creating fast loading high performance RWD Web Pages, Learning and sharing what I learned. Love to avoid costly heavy frameworks and using vanilla JS , HTML, CSS alternatives when possible. Good in vanilla JS, CSS, HTML, PWA Features, jQuery, Angular 1.x , CSS frameworks Foundation, bootstrap.
Updated on October 26, 2020Comments
-
Mohamed Hussain over 3 years
I am developing bootstrap tabs with the use of
data-target
attribute to match the tab panes instead of using thehref
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.
-
Mohamed Hussain over 10 yearsThanks For the Help. Now it is working. One more doubt, whether the data-toggle attributes supported in IE8?
-
Kippie over 10 years@MohamedHussain in the twb source code, they're using the jQuery
attr
function to read out thedata-attribute
. This should be supported by most browsers (up until IE6, I think?) and definitely IE8 -
Paolo Broccardo over 6 yearsThanks for this solution and saving me from going crazy.