How Can I Navigate to Specific Bootstrap Tabs from External Links or After a Page Refresh?

Navigating Twitter Bootstrap Tabs from External Links or Page Refresh

When incorporating Twitter's Bootstrap Tabs into your web pages, navigating directly to specific tabs from external links or upon page reload can be challenging. This article delves into the solution, enabling you to seamlessly transition between tabs.

Problem Background

Suppose you have a page called facility.php that utilizes Bootstrap Tabs and you want to navigate to specific tabs from an external page. For instance, clicking the following links:

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

should lead to the Home and Notes tabs, respectively. However, this transition fails to occur upon direct navigation from the external page.

Solution

To address this issue, we employ the following JavaScript code:

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href=""' + hash + '""]').tab('show');
} 

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

Let's examine each part of the solution:

• Getting the Current Tab: The first part of the code (hash = location.hash.replace(/^#/, '')) retrieves the current tab's fragment identifier (#home or #notes) from the URL.
• Activating the Desired Tab: We then use .nav-tabs a[href="hash"] to select the tab element that corresponds to the fragment identifier. Finally, we use .tab('show') to activate the selected tab.
• Updating the URL on Page Reload: The second part of the code (window.location.hash = e.target.hash) updates the URL's fragment identifier to match the activated tab when the page is refreshed. This ensures that the current tab is preserved even after the page reloads.

With this solution, you can now conveniently navigate directly to specific Bootstrap tabs from external links or upon page refresh, enhancing the user experience.

The above is the detailed content of How Can I Navigate to Specific Bootstrap Tabs from External Links or After a Page Refresh?. For more information, please follow other related articles on the PHP Chinese website!