如何通过URL打开模态框中指定的Bootstrap标签页？

我想通过URL直接打开模态框并切换到指定标签页。目前已经在网站末尾添加了这段JavaScript代码，现在访问website.com/#modal-6可以打开并激活modal-6模态框：

document.addEventListener("DOMContentLoaded", function() {
    if (window.location.href.indexOf("#modal-6") > -1) {
        var myModal = new bootstrap.Modal(document.getElementById('modal-6'));
        myModal.show();
    }
});

这个模态框里包含多个标签页，请问怎么实现访问website.com/#modal-6时，自动显示ID为tab-13的标签页？对应的HTML代码如下：

<ul id="tabContainer-11" class="nav nav-tabs tabcontainer mb-3" role="tablist">
    <li class="nav-item" role="presentation">
        <button id="tab-12" class="nav-link" data-bs-target="#tab-content-12" data-bs-toggle="tab" role="tab" aria-controls="tab-content-12" aria-selected="false"> Login </button>
    </li>
    <li class="nav-item" role="presentation">
        <button id="tab-13" class="nav-link active" data-bs-target="#tab-content-13" data-bs-toggle="tab" role="tab" aria-controls="tab-content-13" aria-selected="true"> ...or subscribe now! </button>
    </li>
</ul>

直接修改现有JavaScript代码，在模态框显示后，利用Bootstrap的Tab组件API激活指定标签页即可：

document.addEventListener("DOMContentLoaded", function() {
    const hash = window.location.hash;
    // 检测URL哈希是否为目标模态框
    if (hash === "#modal-6") {
        const myModal = new bootstrap.Modal(document.getElementById('modal-6'));
        myModal.show();
        
        // 激活ID为tab-13的标签页
        const targetTabBtn = document.getElementById('tab-13');
        if (targetTabBtn) {
            // 通过Bootstrap Tab实例激活标签页
            const tabInstance = new bootstrap.Tab(targetTabBtn);
            tabInstance.show();
        }
    }
});

说明 #

• 这段代码在模态框成功显示后，定位到tab-13标签按钮，通过Bootstrap官方的Tab组件方法show()来切换标签页。
• Bootstrap会自动处理标签页的状态切换：包括给标签按钮添加/移除active类、更新aria-selected属性，以及对应内容区域的显示/隐藏，无需手动修改DOM样式或属性。

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