How to Navigate to a Specific Bootstrap Tab Using an External Link?

How to Navigate to a Specific Twitter Bootstrap Tab from an External Hyperlink

Twitter Bootstrap Tabs provide a convenient way to organize content into separate sections. However, accessing a specific tab from an external link can be problematic. This article will address this issue, guiding you through a solution that allows direct navigation to any desired tab.

Problem Statement

Consider the following HTML structure:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

When clicked from an external page, these links should navigate to the specified tabs ("Home" and "Notes" respectively).

Solution

Utilize JavaScript to achieve this functionality:

// Enable tab navigation from links
var hash = location.hash.replace(/^#/, '');
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
}

// Update hash on tab activation
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
});

Explanation

The shown.bs.tab event handler is triggered when a tab is activated. Within this handler, we update the browser's hash to reflect the currently active tab. This ensures that the hash is updated correctly when the tab is navigated through JavaScript, allowing users to access the desired tab upon reloading the page.

The above is the detailed content of How to Navigate to a Specific Bootstrap Tab Using an External Link?. For more information, please follow other related articles on the PHP Chinese website!