本文为付费教程的骨架翻译：场景与步骤按原文可见部分梳理，锁定代码按 Bricks 官方 DOM 结构补全实现，并已注明「补全实现」。未复制原文代码。
场景：分享链接直达指定标签页
页面里有 Tabs (Nestable) 元素，默认打开第一个标签页。你希望把某个标签页的链接发给用户时，对方打开页面直接看到那个标签的内容，而不是还要手动点一下。
BricksLabs 的做法：给 URL 追加 tab 查询参数，值为目标标签页的 slug：
https://example.com/sample-page?tab=title-2页面加载时用 JavaScript 读取该参数，找到对应标签并自动切换到它。切换后用户依然可以像平常一样手动点击其他标签。这个能力对「产品参数分页链接」「FAQ 分类直达」「活动规则直达」等场景非常实用。
步骤骨架（原教程）
原教程的可见步骤（JS 代码被付费墙截断）：
- 用 Bricks 编辑目标页面/模板，确认 Tabs (Nestable) 元素在前端的标签标题（tab title）文本。
- 访问链接时在 URL 后追加
?tab=标签slug（slug 由标题文本派生，如Title 2→title-2）。 - 在 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')同步修改即可。
小结
「URL 参数 + 自动点击」是给 Bricks 交互组件做深链（deep link）的通用模式：Tabs 支持了，Accordion、Offcanvas 同理可做。核心要点是模拟点击而非直接改类，把状态切换交给 Bricks 自己，兼容性最好。