How To Open A Bootstrap Tabs Using A Link?
Solution 1:
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element --><ulclass="alt-nav-tabs"><li><ahref="index.htm#tab1">tab1</a></li><li><ahref="index.htm#tab2">tab2</a></li></ul><divclass="container"><divclass="tabbable"><ulclass="nav nav-tabs"><liclass="active"><ahref="#tab1"data-toggle="tab">Section 1</a></li><li><ahref="#tab2"data-toggle="tab">Section 2</a></li></ul><divclass="tab-content"><divclass="tab-pane active"id="tab1"><p>I'm in Section 1.</p></div><divclass="tab-pane"id="tab2"><p>I'm in Section 2.</p></div></div></div></div>JS:
<script>// Javascript to enable link to tabvar hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
Post a Comment for "How To Open A Bootstrap Tabs Using A Link?"