使用锚点链接直接打开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);
});

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

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

---

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