在这个简单的例子中，我设置了三个导航标签，以切换三个内容窗格：

<ul class="nav nav-tabs" id="myTabSimple" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tabA-0" data-bs-toggle="tab" data-bs-target="#tabA-pane-0" type="button" role="tab" aria-controls="tabA-pane-0" aria-selected="true">TabA 0</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabA-1" data-bs-toggle="tab" data-bs-target="#tabA-pane-1" type="button" role="tab" aria-controls="tabA-pane-1" aria-selected="true">TabA 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabA-2" data-bs-toggle="tab" data-bs-target="#tabA-pane-2" type="button" role="tab" aria-controls="tabA-pane-2" aria-selected="true">TabA 2</button>
    </li>
</ul>
<div class="tab-content" id="myTabContentSimple">
    <div class="tab-pane fade show active" id="tabA-pane-0" role="tabpanel" aria-labelledby="tabA-0" tabindex="0">
    This is tabA pane 0.
    </div>
    <div class="tab-pane fade" id="tabA-pane-1" role="tabpanel" aria-labelledby="tabA-1" tabindex="0">
    <div id="first-part">
        This is tabA pane 1 - first part.
    </div>
    <div id="second-part">
        This is tabA pane 1 - second part.
    </div>
    <div id="third-part">
        This is tabA pane 1 - third part.
    </div>
    </div>
    <div class="tab-pane fade" id="tabA-pane-2" role="tabpanel" aria-labelledby="tabA-2" tabindex="0">
    This is tabA pane 2.
    </div>  
</div>

我现在想在中间的标签上使用一个下拉菜单，方便用户选择要跳转到该内容窗格中的哪个锚点：#first-part、#second-part 或 #third-part。

我该如何在这段新代码中包含这三个锚点，以实现所需的功能？

<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">
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false">Part 1</button></li>
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false">Part 2</button></li>
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false">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="true">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">
        This is tabB pane 1 - first part.
    </div>
    <div id="second-part">
        This is tabB pane 1 - second part.
    </div>
    <div id="third-part">
        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>

解决方案

由于下拉项在显示标签时（带有 data-bs-toggle="tab"）会导致锚点行为丢失（即使你使用了 a 标签，而不是 button）。

因此，你需要使用JavaScript手动滚动到锚点。

不过，你需要等待Bootstrap实际显示标签，因此可以使用tab show.bs.tab 事件监听器，并在下拉项上存储锚点目标，然后滚动到它：

存储锚点目标：

<li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false" data-anchor="#first-part">Part 1</button></li>

为滚动到触发项的锚点添加标签事件监听器：

document.querySelectorAll('.parts-menu .dropdown-item[data-bs-toggle="tab"]').forEach(item => {

  item.addEventListener('shown.bs.tab', function() {

    const anchor = this.dataset.anchor;

    document.querySelector(anchor).scrollIntoView({
      behavior: 'smooth'
    });

  });

});

演示：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Bootstrap Example</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .parts div {
      height: 300px;
    }
  </style>
  <script>
    addEventListener("DOMContentLoaded", ()=>{

      document.querySelectorAll('.parts-menu .dropdown-item[data-bs-toggle="tab"]').forEach(item => {

        item.addEventListener('shown.bs.tab', function() {

          const anchor = this.dataset.anchor;

          document.querySelector(anchor).scrollIntoView({
            behavior: 'smooth'
          });

        });

      });

    });
  </script>
</head>

<body>


  <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 parts-menu">
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false" data-anchor="#first-part">Part 1</button></li>
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false" data-anchor="#second-part">Part 2</button></li>
        <li><button class="dropdown-item" data-bs-toggle="tab" data-bs-target="#tabB-pane-1" type="button" role="tab" aria-controls="tabB-pane-1" aria-selected="false" 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="true">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 parts" id="tabB-pane-1" role="tabpanel" aria-labelledby="tabB-1" tabindex="0">
      <div id="first-part">
        This is tabB pane 1 - first part.
      </div>
      <div id="second-part">
        This is tabB pane 1 - second part.
      </div>
      <div id="third-part">
        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>



</body>

</html>