使用锚点链接直接打开Elementor TAB选项卡对应标签

最近的一个wordpress外贸建站项目中，客户需要做一个比较复杂的表单页，同一个页面显示两套表单，但需要通过链接直接打开对应的表单。这种需要首选想到的就是使用TAB标签模块，给TAB标签添加锚点链接就可以了。

但是想实现这种效果得看插件或模板是否支持，有些支持，有些不支持。比如这个网站用的是Elementor编辑器，使用的是Elementor TAB选项卡模块，自带的那个，它原生是不支持的，虽然能过给每个标签指定ID，并通过#锚点链接打开，但它并不会直接打开对应的标签。

如果你跟我一样不想单独装插件来实现，可以参考我使用的方法：

步骤一：设置CSS ID

如上图所示，给不同的TAB标签项目设置不同的CSS ID（和锚点一个效果），注意不要设置为相同的，不要出现空格，多个单词需要用连字符。

步骤二：添加JS代码

这里直接贴出代码，大家直接复制拿去用就行。

jQuery(window).on('load', function() {
    // 激活标签函数
    function activateTab() {
        var hash = window.location.hash;
        if (!hash) return;

        var targetID = hash.replace('#', '');
        var $targetTab = jQuery('.e-n-tab-title#' + targetID);

        // 等待标签加载完成
        var checkTab = setInterval(function() {
            if ($targetTab.length) {
                clearInterval(checkTab);
                
                // 核心修复：强制触发点击（无视当前状态）
                $targetTab.trigger('click');
                
                // 平滑滚动
                setTimeout(function() {
                    jQuery('html, body').animate({
                        scrollTop: $targetTab.offset().top - 100
                    }, 300);
                }, 100);
            }
        }, 100);
    }

    // 页面加载执行
    activateTab();

    // 监听 hash 变化
    jQuery(window).on('hashchange', activateTab);

    // 修复：当前页面重复点击锚点（hash 不变时也生效）
    jQuery(document).on('click', 'a[href*="#"]', function(e) {
        var href = jQuery(this).attr('href');
        if (!href) return;
        
        // 获取当前链接里的锚点
        var clickHash = href.split('#')[1] || '';
        if (!clickHash) return;

        var currentHash = window.location.hash.replace('#', '');
        
        // 如果点击的锚点 和 当前地址栏的锚点 一样
        if (clickHash === currentHash) {
            e.preventDefault(); // 阻止默认行为
            activateTab(); // 直接强制激活
        }
    });
});

以上代码要以添加到专门的代码管理插件中，推荐使用WP CODE之类的插件。添加并启用之后就可以了。

前端可以刷新一下浏览器，然后使用链接测试，比如你的这个页面链接是【域名/contact】,给TAB选项卡分别设置的CSS ID为quote1和quote2，那么使用【域名/contact/#quote1】、【域名/contact/#quote2】就可以直接打开对应的TAB标签了。

---

小结：这又是一个比较小众的需求了，如非必要，不必折腾！主题或插件本身能支持到什么程度，就这么用好了。