HTML Bootstrap 选项卡内容链接在首次单击后“冻结”

问：

我正在使用 Bootstrap 在我的 HTML 页面上构建页面导航功能。list-group

我正在尝试构建一个嵌套的引导列表组。

但是，div 类中的链接仅在第一次单击时有效。tab-content

第二次单击时，链接会“冻结”，除非我刷新页面，否则链接将无法正常工作。

页面如下所示。

有人可以帮我找出问题所在吗？

提前致谢！

<div class="row">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
        <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
          <a id="list-home-page" data-toggle="list" href="#aa" role="tab" aria-controls="a">
          A
          </a>
        </div>
        <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
          <a id="list-profile-page" data-toggle="list" href="#bb" role="tab" aria-controls="b">
          B
          </a>
        </div>
      </div>
    </div>
  </div>
  <br><br>
  <div class="tab-content" id="nav-tabPage">
  <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
    New A
  </div>
  <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
    New B
  </div>
  </div>