在bootstrap卡中获取新选项卡项时重新加载页面

<div class="card">
  <div class="card-header" id="myTabHeader">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="tab1" data-toggle="tab" href="#content1">选项卡1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab2" data-toggle="tab" href="#content2">选项卡2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab3" data-toggle="tab" href="#content3">选项卡3</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="content1">
        <h5 class="card-title">选项卡1内容</h5>
        <p class="card-text">这是选项卡1的内容。</p>
      </div>
      <div class="tab-pane fade" id="content2">
        <h5 class="card-title">选项卡2内容</h5>
        <p class="card-text">这是选项卡2的内容。</p>
      </div>
      <div class="tab-pane fade" id="content3">
        <h5 class="card-title">选项卡3内容</h5>
        <p class="card-text">这是选项卡3的内容。</p>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href"); // 获取当前选中的选项卡项的href属性值
    if (target == "#content1") {
      // 重新加载页面或执行其他操作
      location.reload();
    }
    // 其他选项卡项的处理逻辑
  });
});