通过 URL 参数 ?tab=xxx 直达 Bricks Tabs 指定标签页（补全实现）

本文为付费教程的骨架翻译：场景与步骤按原文可见部分梳理，锁定代码按 Bricks 官方 DOM 结构补全实现，并已注明「补全实现」。未复制原文代码。

场景：分享链接直达指定标签页

页面里有 Tabs (Nestable) 元素，默认打开第一个标签页。你希望把某个标签页的链接发给用户时，对方打开页面直接看到那个标签的内容，而不是还要手动点一下。

BricksLabs 的做法：给 URL 追加 tab 查询参数，值为目标标签页的 slug：

https://example.com/sample-page?tab=title-2

页面加载时用 JavaScript 读取该参数，找到对应标签并自动切换到它。切换后用户依然可以像平常一样手动点击其他标签。这个能力对「产品参数分页链接」「FAQ 分类直达」「活动规则直达」等场景非常实用。

步骤骨架（原教程）

原教程的可见步骤（JS 代码被付费墙截断）：

1. 用 Bricks 编辑目标页面/模板，确认 Tabs (Nestable) 元素在前端的标签标题（tab title）文本。

2. 访问链接时在 URL 后追加 ?tab=标签slug（slug 由标题文本派生，如 Title 2 → title-2）。

3. 在 Settings（齿轮图标）→ PAGE SETTINGS → CUSTOM CODE → Body (footer) scripts 粘贴脚本，实现「读取参数 → 切换标签」。

补全实现：按 tab 参数自动切换

Bricks Tabs (Nestable) 前端的标准结构：容器类 brxe-tabs-nestable，标题按钮类 tab-title，激活态通过 .brx-open 类控制。据此补全实现如下（补全实现，放入 Body (footer) scripts，记得包上 <script> 标签）：

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 1. 读取 URL 中的 tab 参数
  const params = new URLSearchParams(window.location.search);
  const tabSlug = params.get('tab');
  if (!tabSlug) {
    return;
  }
  // 2. 遍历页面上的 Tabs (Nestable) 元素
  document.querySelectorAll('.brxe-tabs-nestable').forEach(function (tabs) {
    const titles = tabs.querySelectorAll('.tab-title');
    titles.forEach(function (title) {
      // 3. 由标题文本派生 slug，与 URL 参数比对
      const slug = title.textContent.trim().toLowerCase().replace(/\s+/g, '-');
      if (slug === tabSlug) {
        // 4. 命中则模拟点击，Bricks 会完成切换与内容联动
        title.click();
      }
    });
  });
});
</script>

用法示例：https://example.com/sample-page?tab=title-2 会在加载后自动打开第二个标签页（前提是第二个标签标题为 Title 2）。

原理说明

• slug 派生规则：URL 参数值 = 标签标题文本去掉首尾空格、转小写、连续空格替换为连字符。标题是中文时同样适用（产品参数 → ?tab=产品参数），保持标题与参数一一对应即可。

• 为什么用 title.click() 而不是直接加 .brx-open：Tabs 的切换不只是样式变化，还涉及 aria-selected、内容面板显隐、可能的动画与事件回调。模拟点击走 Bricks 自己的切换逻辑，行为与用户手动点击完全一致，最稳妥。

• DOMContentLoaded 时机：必须等 DOM 就绪才能找到 .tab-title；放在页脚脚本本身就在文档末尾执行，加监听更保险。

• 多 Tabs 兼容：querySelectorAll('.brxe-tabs-nestable') 遍历所有实例，每个实例内独立比对，页面有多个 Tabs 也不会串台。

• 参数名为 tab 是约定，可自行改成 active-tab 等，只要脚本里 get('tab') 同步修改即可。

相关阅读：

• Bricks Countdown 倒计时元素接入动态日期（bricks/element/settings 补全实现）

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

常见误区

几个坑：一是分享链接带 ?tab= 参数，但页面加载时 Tab 脚本还没跑完，参数没被消费，按本文在页面就绪后再读参数切 Tab；二是同一页面有多个 Tabs 组件，参数没指定是哪个，切错组件，给每个 Tabs 加唯一标识；三是移动端 Tabs 收成下拉后，深链还是按桌面 Tab 名匹配，要对齐两套结构的命名。深链直达适合「分享到具体章节」的场景，参数命名和组件标识对齐最关键。

小结

「URL 参数 + 自动点击」是给 Bricks 交互组件做深链（deep link）的通用模式：Tabs 支持了，Accordion、Offcanvas 同理可做。核心要点是模拟点击而非直接改类，把状态切换交给 Bricks 自己，兼容性最好。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程