我正在創(chuàng)建一個應(yīng)用程序，它生成多張卡片，每張卡片上有 3 個選項(xiàng)卡。但是選項(xiàng)卡切換并不像預(yù)期的那樣工作。在第一張卡上執(zhí)行此操作時，它工作正常，但是當(dāng)我嘗試按其他卡選項(xiàng)卡時，它只會在第一張卡上切換。我無法理解它。$(document).on('click', '.navigation a', function(e) {  e.preventDefault();  $(this).tab('show');})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><div class="card-columns">  <div class="card">    <div class="card-header">      <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">        <li class="nav-item">          <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>        </li>        <li class="nav-item">          <a class="nav-link" href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>        </li>        <li class="nav-item">          <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>        </li>      </ul>    </div>    <div class="card-body">      <h4 class="card-title">Item name</h4>      <div class="tab-content mt-3">        <div class="tab-pane active info" role="tabpanel">          <img src="https://images.pexels.com/photos/1279330/pexels-photo-1279330.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" class="card-img-top" alt="">          <div class="text-center">            <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>            <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>          </div>        </div>