如何通过单击bootstrap navtab中某个选项卡中的锚点链接导航到另一个选项卡

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">选项卡1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">选项卡2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">选项卡3</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    <!-- 选项卡1的内容 -->
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    <!-- 选项卡2的内容 -->
  </div>
  <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
    <!-- 选项卡3的内容 -->
  </div>
</div>

<a href="#tab2" data-toggle="tab">导航到选项卡2</a>

$(document).ready(function() {
  $('#myTab a').on('click', function (e) {
    e.preventDefault();
    $(this).tab('show');
  });
});