How to open a bootstrap tabs using a link?

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>

asked Nov 14 '18 at 16:40

creativeartbd

399314

add a comment |

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>

asked Nov 14 '18 at 16:40

creativeartbd

399314

add a comment |

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>

asked Nov 14 '18 at 16:40

creativeartbd

399314

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>

javascript twitter-bootstrap-3

asked Nov 14 '18 at 16:40

creativeartbd

399314

asked Nov 14 '18 at 16:40

creativeartbd

399314

asked Nov 14 '18 at 16:40

creativeartbd

399314

asked Nov 14 '18 at 16:40

creativeartbd

399314

asked Nov 14 '18 at 16:40

creativeartbd

399314

add a comment |

1 Answer
1

active

oldest

votes

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.

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

|
show 8 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304960%2fhow-to-open-a-bootstrap-tabs-using-a-link%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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...

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.

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

|
show 8 more comments

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...

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.

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

|
show 8 more comments

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...

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.

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

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...

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.

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

edited Nov 14 '18 at 18:34

answered Nov 14 '18 at 16:51

Justin T.

596313

answered Nov 14 '18 at 16:51

Justin T.

596313

answered Nov 14 '18 at 16:51

Justin T.

596313

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

|
show 8 more comments

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

thanks but unfortunately it's not open the tab when I click on the link

– creativeartbd
Nov 14 '18 at 16:53

Uncaught Error: Syntax error, unrecognized expression: .nav-tabs a[href=#tab2]

– creativeartbd
Nov 14 '18 at 16:54

Try changing your href="index.htm#tab1" to just href="#tab1", and do the same for tab2.

– Justin T.
Nov 14 '18 at 17:16

I have found a solution and implemented here: futura-dev.totalcommit.com/categorias/#tab-bem-estar-e-ambiente but I see last tab content is always showing. do you know why?

– creativeartbd
Nov 14 '18 at 17:26

can you tell me why the other content is still visible?

– creativeartbd
Nov 14 '18 at 17:32

|
show 8 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky