How to open a bootstrap tabs using a link?

Question

I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a

but unfortunately it's not working. how can i do this?

html code:

<ul>
    <li><a href="index.htm#tab1">tab1</a></li>
    <li><a href="index.htm#tab2">tab2</a></li>
</ul>

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
                <p>I'm in Section 2.</p>
            </div>
        </div>
    </div>
</div>

Js Code:

<script>
// Javascript to enable link to tab
var 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);
});
</script>

Answer 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 -->
<ul class="alt-nav-tabs">
    <li><a href="index.htm#tab1">tab1</a></li>
    <li><a href="index.htm#tab2">tab2</a></li>
</ul>

<div class="container">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
      </ul>
      <div class="tab-content">
            <div class="tab-pane active" id="tab1">
                <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
                <p>I'm in Section 2.</p>
            </div>
        </div>
    </div>
</div>

JS:

<script>
// Javascript to enable link to tab
var 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.

How to open a bootstrap tabs using a link?

Question

1 answers

solution1
1 2018-11-14 16:51:14

How to open a bootstrap tabs using a link?

Question

1 answers

solution1 1 2018-11-14 16:51:14

solution1
1 2018-11-14 16:51:14