URL哈希实现选项卡切换教程

JavaScript实现步骤

我们将使用jQuery来简化DOM操作，因为它在原始问题中有所体现。

1. 创建激活选项卡的函数

首先，定义一个函数 changeTab()，它负责获取当前URL哈希并激活对应的选项卡。

function changeTab() {
    // 获取当前URL的哈希值，例如 "#tab1"
    const currentHash = location.hash;

    // 如果存在哈希值
    if (currentHash) {
        // 使用jQuery选择器找到 href 属性与 currentHash 匹配的选项卡链接
        // 注意：role=tab 是为了更精确地定位选项卡导航链接
        const $targetTabLink = $(`a[role=tab][href='${currentHash}']`);

        // 如果找到了对应的选项卡链接，则触发其点击事件
        if ($targetTabLink.length) {
            $targetTabLink.click();
        }
    }
}

2. 页面加载时执行

为了确保当用户首次访问带有哈希的URL时，正确的选项卡能够被激活，我们需要在页面加载完成后立即调用 changeTab() 函数。

// 在文档加载完成后执行
$(document).ready(function() {
    changeTab();
});

或者，如果你的脚本在 结束标签之前加载，可以直接调用：

changeTab();

3. 监听哈希变化事件

当用户在同一页面内通过修改URL哈希（例如通过浏览器前进/后退按钮，或者JS动态修改 location.hash）时，我们也希望选项卡能够相应地切换。这时就需要监听 hashchange 事件。

// 监听 window 对象的 hashchange 事件
window.addEventListener('hashchange', changeTab);

完整代码示例

将以上三部分结合，形成完整的JavaScript解决方案：

<script>
$(document).ready(function() {
    // 定义一个函数来根据URL哈希激活选项卡
    function activateTabFromHash() {
        const currentHash = location.hash; // 获取URL哈希，例如 "#tab1"

        // 如果存在哈希值
        if (currentHash) {
            // 查找 href 属性与当前哈希匹配的选项卡导航链接
            // 这里假设选项卡链接有 role="tab" 属性
            const $targetTabLink = $(`a[role=tab][href='${currentHash}']`);

            // 如果找到了对应的链接，则触发其点击事件
            if ($targetTabLink.length) {
                $targetTabLink.click();
            }
        }
    }

    // 1. 页面加载时执行一次，以激活初始URL哈希对应的选项卡
    activateTabFromHash();

    // 2. 监听 hashchange 事件，以便在URL哈希改变时动态切换选项卡
    window.addEventListener('hashchange', activateTabFromHash);

    // 原始的选项卡点击逻辑（如果存在，用于处理用户手动点击）
    // 如果你的选项卡系统（如Bootstrap）已经处理了点击事件，这部分可能不需要
    // $('.userhref').click(function(){
    //     $('#nav').find('li').find('a[href=' + $(this).attr('href') + ']').closest('li').addClass('active').siblings('li').removeClass('active');
    // });
});
</script>

代码解析