Linking to a Bootstrap Tab from outside - how to set the tab to “active”?

Question

I have a Bootstrap \"tab\" navigation with 3 different content tabs. It works perfectly except that I want to link to one of the tabs from OUTSIDE the tab navigation. Meanin

Answer 1

The simplest answer is to do it like this:

Profile Link From Outside

then in javascript add:

$(document).ready(function () {
    $("#profilelink").click(function () {
        $('.nav a[href="#profile"]').tab('show');           
    });
});

This will change both the content view and the active button on the top using the built in method of the jquery tabs plugin. If you wanted to add more buttons outside the tab area, then you can make it more general eg.

Profile Link From Outside


$(document).ready(function () {
    $(".outsidelink").click(function () {
        $('.nav a[href="' +  $(this).attr("href") + '"]').tab('show');          
    });
});