如何在Bootstrap 5导航标签的下拉菜单中设置锚点目标？

要实现点击下拉菜单选项时，先切换到目标标签页，再滚动到面板内的指定锚点，需要从HTML结构调整和JavaScript事件处理两部分修改：

1. 调整HTML结构 #

修改下拉菜单的选项，添加自定义属性存储锚点目标，同时简化不必要的tab相关属性：

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tabB-0" data-bs-toggle="tab" data-bs-target="#tabB-pane-0" type="button" role="tab" aria-controls="tabB-pane-0" aria-selected="true">TabB 0</button>
    </li>
    
    <li class="nav-item dropdown" role="presentation">
        <button class="nav-link dropdown-toggle" id="tabB-1" type="button" data-bs-toggle="dropdown" aria-expanded="false">TabB 1</button>
        <ul class="dropdown-menu">
            <!-- 添加data-anchor属性存储锚点，移除不必要的tab角色属性 -->
            <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" data-anchor="#first-part">Part 1</button></li>
            <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" data-anchor="#second-part">Part 2</button></li>
            <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" data-anchor="#third-part">Part 3</button></li>
        </ul>
    </li>
    
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabB-2" data-bs-toggle="tab" data-bs-target="#tabB-pane-2" type="button" role="tab" aria-controls="tabB-pane-2" aria-selected="false">TabB 2</button>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade show active" id="tabB-pane-0" role="tabpanel" aria-labelledby="tabB-0" tabindex="0">
        This is tabB pane 0.
    </div>
    <div class="tab-pane fade" id="tabB-pane-1" role="tabpanel" aria-labelledby="tabB-1" tabindex="0">
        <!-- 保持原锚点结构不变，添加样式方便测试滚动效果 -->
        <div id="first-part" style="margin-top: 800px; padding: 20px; background: #f5f5f5;">
            This is tabB pane 1 - first part.
        </div>
        <div id="second-part" style="margin-top: 800px; padding: 20px; background: #f5f5f5;">
            This is tabB pane 1 - second part.
        </div>
        <div id="third-part" style="margin-top: 800px; padding: 20px; background: #f5f5f5;">
            This is tabB pane 1 - third part.
        </div>
    </div>
    <div class="tab-pane fade" id="tabB-pane-2" role="tabpanel" aria-labelledby="tabB-2" tabindex="0">
        This is tabB pane 2.
    </div>  
</div>

2. 添加JavaScript事件处理 #

利用Bootstrap的shown.bs.tab事件，在标签页切换完成后，滚动到指定锚点：

// 监听下拉项点击，存储目标锚点
let targetAnchor = null;
document.querySelectorAll('.dropdown-item[data-anchor]').forEach(item => {
    item.addEventListener('click', function() {
        targetAnchor = this.getAttribute('data-anchor');
    });
});

// 监听标签页切换完成事件，执行滚动
document.addEventListener('shown.bs.tab', function() {
    if (targetAnchor) {
        const anchorElement = document.querySelector(targetAnchor);
        if (anchorElement) {
            // 平滑滚动到锚点，可根据需求调整行为
            anchorElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
        targetAnchor = null; // 重置锚点
    }
});

关键说明 #

• 自定义属性data-anchor用来存储每个下拉项对应的锚点目标，避免硬编码；
• 必须等待shown.bs.tab事件触发后再执行滚动，因为标签页的fade动画完成后才会显示内容，提前滚动会无效；
• 如果不需要平滑滚动，可移除behavior: 'smooth'参数，直接使用anchorElement.scrollIntoView()。

内容的提问来源于stack exchange，提问作者Boycott A.I.