如何通过锚点链接唤起Bootstrap 5按钮式标签页？

我想实现访问类似 mydomain.net/#notes 这样的链接时，自动选中并打开对应的Notes标签页。尝试过相关解决方案但未成功，当前使用的nav-tabs代码如下（已按Bootstrap 5官方文档设置tab-pane）：

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="profile" aria-selected="false">Notes</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#nHistory" type="button" role="tab" aria-controls="contact" aria-selected="false">History</button>
    </li>
    <li class="nav-item ms-auto" role="presentation">
        <a href="/profile"><i class="bi bi-x-lg"></i></a>
    </li>
</ul>

解决方案 #

Bootstrap 5的Tab组件需要通过官方提供的JS API触发切换，以下是适配的实现代码：

1. 添加以下JavaScript代码（需确保在Bootstrap JS文件之后加载）：

document.addEventListener('DOMContentLoaded', function() {
    const hash = window.location.hash;
    
    if (hash && hash.startsWith('#')) {
        const tabTrigger = document.querySelector(`[data-bs-target="${hash}"]`);
        
        if (tabTrigger) {
            const tab = new bootstrap.Tab(tabTrigger);
            tab.show();
        }
    }
});

2. 关键说明：
   • 代码会在页面加载完成后读取URL中的哈希值，自动匹配对应data-bs-target属性的标签页按钮
   • 需保证tab-pane的ID与按钮的data-bs-target值完全一致（比如Notes标签页的data-bs-target="#notes"，对应的tab-pane ID必须为notes）
   • 确保已正确加载Bootstrap 5的完整JS文件（如bootstrap.bundle.min.js，包含Popper依赖）

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