“Bootstrap4”选项卡面板“不切换”面板

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#panel1">面板1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#panel2">面板2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#panel3">面板3</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="panel1" class="tab-pane fade show active">
      <h3>面板1内容</h3>
      <p>这是面板1的内容。</p>
    </div>
    <div id="panel2" class="tab-pane fade">
      <h3>面板2内容</h3>
      <p>这是面板2的内容。</p>
    </div>
    <div id="panel3" class="tab-pane fade">
      <h3>面板3内容</h3>
      <p>这是面板3的内容。</p>
    </div>
  </div>
</div>

$(document).ready(function(){
  $('.nav-link').click(function(e){
    e.preventDefault(); // 阻止默认的切换行为
  });
});