Gitbook页面指定Tab跳转问题求助：如何直接打开第二个Tab

核心思路 #

Gitbook的Tab默认不会通过锚点自动切换，需要结合锚点链接+自定义JS触发Tab切换来实现，具体步骤分以下几种情况：

1. 先确认Tab的DOM结构 #

打开你的Gitbook页面，右键检查第二个Tab的元素：

• 找到Tab的触发按钮（通常是<button>或<a>标签），看它有没有id、data-tab-id这类标识，或者它的data-target属性指向的内容容器ID。
• 比如第二个Tab的触发按钮可能是：<button class="tab-btn" data-tab-id="tab2">Tab 2</button>，或者内容容器是<div id="tab2-content" class="tab-content">。

2. 构造跳转链接 #

不管用哪种Tab插件，跳转链接都要带上目标Tab的标识作为哈希值：

• 比如页面路径是/docs/guide.html，目标Tab的标识是tab2，那链接就是：/docs/guide.html#tab2

3. 添加自定义JS自动激活Tab #

单纯的锚点只会定位到元素，不会触发Tab切换，需要加一段JS来实现：

步骤1：创建自定义JS文件 #

在Gitbook项目根目录下新建assets/js/custom.js，写入以下代码（根据你的DOM结构调整选择器）：

// 根据哈希值激活对应Tab
function activateTargetTab() {
    const tabId = window.location.hash.slice(1); // 去掉开头的#
    if (!tabId) return;

    // 情况1：Tab触发按钮有data-tab-id属性
    const tabButton = document.querySelector(`[data-tab-id="${tabId}"]`);
    // 情况2：Tab内容容器有ID，找对应的触发按钮（根据你的DOM结构修改）
    // const tabContent = document.getElementById(tabId);
    // const tabButton = tabContent?.closest('.tab-group')?.querySelector(`[data-target="#${tabId}"]`);

    if (tabButton) {
        tabButton.click(); // 模拟点击切换Tab
        tabButton.scrollIntoView({ behavior: 'smooth' }); // 可选：平滑滚动到Tab位置
    }
}

// 页面加载时执行
window.addEventListener('load', activateTargetTab);
// 哈希变化时执行（比如用户手动修改URL哈希）
window.addEventListener('hashchange', activateTargetTab);

步骤2：配置Gitbook加载自定义JS #

在项目根目录的book.json里添加customjs插件配置（如果没有book.json就新建一个）：

{
    "plugins": ["customjs"],
    "pluginsConfig": {
        "customjs": ["assets/js/custom.js"]
    }
}

步骤3：安装插件并重新构建 #

在终端执行：

gitbook install
gitbook build # 或者 gitbook serve 启动本地预览

4. 插件特定优化（可选） #

如果你用的是特定Tabs插件，比如gitbook-plugin-tabs，可以在定义Tab时直接指定ID：

{% tabs %}
{% tab title="Tab 1" id="tab1" %}
Tab 1的内容
{% endtab %}
{% tab title="Tab 2" id="tab2" %}
Tab 2的内容
{% endtab %}
{% tab title="Tab 3" id="tab3" %}
Tab 3的内容
{% endtab %}
{% endtabs %}

这种情况下，直接用页面URL#tab2作为链接，配合上面的JS就能直接激活第二个Tab。

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