Bootstrap nav-pills切换内容失效问题排查求助

• 问题根源：你在导航链接中使用了data-mdb-toggle="pill"属性，但当前页面引入的是原生Bootstrap 5的JS库。Bootstrap官方的标签切换触发属性是data-bs-toggle="pill"，data-mdb-toggle是MDB（基于Bootstrap的第三方UI库）专属属性，原生Bootstrap无法识别这个属性，因此点击导航胶囊时无法触发内容切换逻辑。
• 修复方法：将所有导航链接中的data-mdb-toggle="pill"替换为data-bs-toggle="pill"即可，无需额外添加其他配置。

修改后的完整代码：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
  <div class="container" id="navigation" role="navigation">
      <!-- pills content -->
      <ul  class="nav nav-pills mb-3" id="detail_tab" role="tablist">
          <li class="nav-item" role="presentation">
              <a
                  class="nav-link active"
                  id="pill1" 
                  data-bs-toggle="pill"
                  href="#content1"
                  role="tab"
                  aria-controls="content1"
                  aria-selected="true"                        
              >pill1</a>
          </li>
          <li class="nav-item" role="presentation">
              <a
                  class="nav-link"
                  id="pill2" 
                  data-bs-toggle="pill"
                  href="#content2"
                  role="tab"
                  aria-controls="content2"
                  aria-selected="false"                        
              >pill2</a>
          </li>
      </ul>
      <!-- pills nav -->


      <!-- pills content -->
      <div class="tab-content clearfix" id="tablist-content">
          <div
              class="tab-pane fade show active"
              id="content1"
              role="tabpanel"
              aria-labelledby="pill1"
          >
              content1
          </div>
          <div class="tab-pane fade" id="content2" role="tabpanel" aria-labelledby="pill2">
              content2
          </div>
      </div>
      <!-- pills content -->
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>

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