按钮单击时显示选项卡内容不起作用

Question

我有一个带有两个使用bootstrap按钮的按钮组。当单击“链接1”按钮时，我想显示ID为“link1”的选项卡，当单击“链接2”按钮时，我想显示ID为“link2”的选项卡。但它不起作用，你知道错误在哪里吗？

<div class="tab-pane clearfix fade" id="links" role="tabpanel" aria-labelledby="contact-tab">
  <div class="btn-group d-flex justify-content-center mb-3" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary" href="#link1" data-toggle="tab" role="tab">
    Link 1</button>
    <button type="button" class="btn btn-outline-primary" href="#link2" data-toggle="tab" role="tab">Link 2 </button>
  </div>
  <div class="tab-content bg-white" id="myTabContent">
    <div class="tab-pane fade show active clearfix" id="link1" role="tabpanel" aria-labelledby="home-tab">
      item of link 1
    </div>
    <div class="tab-pane fade show active clearfix" id="link2" role="tabpanel" aria-labelledby="home-tab">
      item of link 2
    </div>
  </div>
</div>