如何让UI有bootstrap 4选项卡，在每次点击按钮时都会执行post？

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<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">Tab 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">Tab 2</a>
  </li>
  <!-- 添加更多选项卡 -->
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
    <!-- Tab 1 的内容 -->
  </div>
  <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
    <!-- Tab 2 的内容 -->
  </div>
  <!-- 添加更多选项卡对应的面板 -->
</div>

<button class="btn btn-primary" onclick="postData()">执行POST请求</button>

<script>
  function postData() {
    // 执行POST请求的逻辑
    // 可以使用JavaScript的fetch或者jQuery的ajax方法发送POST请求
  }
</script>

function postData() {
  fetch('https://example.com/api/endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      // 请求体数据
    })
  })
  .then(response => response.json())
  .then(data => {
    // 处理POST请求的响应数据
  })
  .catch(error => {
    // 处理POST请求的错误
  });
}