如何从外部页面通过链接打开single-page.html的指定Tab标签页

首先得先修正你现有代码里的一个小问题：你的HTML结构里Tab容器的类是.tabs，但jQuery代码里用的是.content-tabs作为选择器，这会导致原本的Tab切换功能都无法正常工作，先把这个选择器统一改成.tabs。

接下来，要实现外部链接跳转后直接激活对应Tab，我们需要在页面加载完成时检测URL的哈希值，并根据哈希值自动切换到对应的Tab。具体步骤如下：

完整的jQuery代码修改 #

$(function () {
    // 定义切换Tab的通用函数，避免重复代码
    function switchTab(targetHash) {
        // 移除所有Tab项的active类
        $(".tabs .tab-opt ul li").removeClass('active');
        // 给对应Tab项的父li添加active类
        $(".tabs .tab-opt ul li a[href='" + targetHash + "']").parent().addClass('active');
        // 隐藏所有Tab内容
        $(".tabs .tabs-content > div").hide();
        // 显示目标Tab内容
        $(targetHash).fadeIn();
    }

    // 处理Tab点击切换事件
    $(".tabs .tab-opt ul li a").on('click', function (e) {
        e.preventDefault(); // 阻止默认锚点跳转行为，避免页面滚动
        var targetHash = $(this).attr('href');
        switchTab(targetHash);
        // 更新URL哈希值，确保刷新页面后仍保持当前Tab状态
        window.location.hash = targetHash;
    });

    // 页面加载时检测哈希值，切换到对应Tab
    var initialHash = window.location.hash;
    if (initialHash && $(initialHash).length) {
        // 如果哈希值存在且对应的Tab元素存在，切换到该Tab
        switchTab(initialHash);
    } else {
        // 如果没有哈希值或对应元素不存在，默认显示第一个Tab
        $(".tabs .tab-opt ul li:first").addClass('active');
        $(".tabs .tabs-content > div:first").show();
    }
});

代码说明 #

• 通用切换函数switchTab：把重复的Tab切换逻辑抽成独立函数，方便点击事件和页面加载时复用，减少冗余代码。
• 阻止默认锚点行为：在点击Tab链接时加上e.preventDefault()，避免页面自动跳转到锚点位置导致不必要的滚动，同时手动更新URL哈希值，保证刷新页面后仍能保持当前Tab状态。
• 页面加载时检测哈希：通过window.location.hash获取初始哈希值，判断是否存在对应的Tab元素，如果存在就调用切换函数激活对应Tab；如果不存在则保持默认的第一个Tab激活状态，兼容无哈希的访问场景。

外部链接使用注意 #

你现有的外部链接写法<a href="/single-page.html#agb">AGB</a>完全没问题，不需要修改，页面加载时会自动识别#agb哈希并切换到对应的Tab。

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