jQuery Tab导航URL哈希跳转实现：输入带#的URL直接打开对应标签页

Got it, let's add that URL hash-based tab activation feature to your existing code. Here's how you can do it step by step:

First, we'll add logic to check the URL hash on page load, activate the matching tab if it exists, and also handle hash changes if the user navigates via back/forward buttons. We'll also update the URL hash when a tab is clicked so bookmarks or shared links open the correct tab.

Here's the modified complete code:

// Existing tab click handler (updated to sync URL hash)
$('.store_tabs li').click(function() {
    const tabId = $(this).attr('data-tab');
    setActiveTab(tabId, $(this));
    // Update URL hash to match the selected tab
    window.location.hash = tabId;
});

// Tab activation function (adjust selectors to match your HTML if needed)
function setActiveTab(dataID, ele) {
    var tab_id = dataID;
    // Remove active state from all tabs
    $('.store_tabs li').removeClass('active');
    // Hide all tab content panels
    $('.tab_content').removeClass('active'); // Replace with your actual tab content class
    // Mark the target tab as active
    ele.addClass('active');
    // Show the corresponding tab content
    $("#" + tab_id).addClass('active'); // Adjust if your content uses a different ID pattern
}

// Function to activate tab based on URL hash
function activateTabFromHash() {
    const hash = window.location.hash.slice(1); // Strip the # from the URL hash
    if (hash) {
        // Find the tab matching the hash value
        const targetTab = $('.store_tabs li[data-tab="' + hash + '"]');
        if (targetTab.length) {
            setActiveTab(hash, targetTab);
            return;
        }
    }
    // Fallback to first tab if no valid hash exists
    const firstTab = $('.store_tabs li').first();
    setActiveTab(firstTab.attr('data-tab'), firstTab);
}

// Initialize on page load
$(document).ready(function() {
    activateTabFromHash();
});

// Update tab when URL hash changes (back/forward buttons)
$(window).on('hashchange', function() {
    activateTabFromHash();
});

Quick breakdown of the new features: #

• Hash-based initialization: When the page loads, we check if the URL has a #tab-name fragment. If there's a tab with that data-tab value, we activate it immediately.
• Fallback behavior: If the hash is empty or doesn't match any tab, we default to activating the first tab like your original code did.
• Sync hash on click: Now when a user clicks a tab, the URL updates to include the tab's ID as a hash. This means shared links or bookmarks will open directly to the selected tab.
• Hash change listener: If the user uses the browser's back/forward buttons to navigate between tab URLs, the active tab updates automatically.

Just make sure to adjust selectors like .tab_content or $("#" + tab_id) to match your actual HTML structure—these are common patterns, but your code might use different class names or ID formats.

内容的提问来源于stack exchange，提问作者charlie97