显示单个页面中每个选项卡的特定内容

Question

我有一个页面，其中包含4个标签。
我想从一个选项卡切换到另一个选项卡并显示其特定内容。
正如您在以下代码片段中看到的那样，我想在单击Tab1时看到“ 1”，在单击Tab2时看到“ 2”，依此类推。
我该怎么做才能使其正常工作？
非常感谢您的帮助。

<div>
<nav class="nav">
  <a class="nav-link active" href="#1">Tab1</a>
  <a class="nav-link" href="#2">Tab2</a>
  <a class="nav-link" href="#3">Tab3</a>
  <a class="nav-link" href="#4">Tab4</a>
</nav>


  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="1">1</div>
    <div role="tabpanel" class="tab-pane" id="2">2</div>
    <div role="tabpanel" class="tab-pane" id="3">3</div>
    <div role="tabpanel" class="tab-pane" id="4">4</div>
  </div>
</div>