选项卡切换无法在多张卡片上正常工作

Question

我正在创建一个应用程序，它生成多张卡片，每张卡片上有 3 个选项卡。但是选项卡切换并不像预期的那样工作。在第一张卡上执行此操作时，它工作正常，但是当我尝试按其他卡选项卡时，它只会在第一张卡上切换。我无法理解它。

$(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>

Answer 1

这是因为使用了类和 href，例如试试这个：$(document).on('click','.navigation a', function (e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; $(this).tab('show');})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/><div class="card-columns">&nbsp; <div class="card">&nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" href=".info" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link"&nbsp; href=".ingredients" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href=".nutrition" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h4 class="card-title">Item name</h4>&nbsp; &nbsp; &nbsp; <div class="tab-content mt-3">&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane active info" role="tabpanel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Ingredient list</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=ingredientList>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Nutrition information</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=nutritionInfo>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="card">&nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" href=".info2" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link"&nbsp; href=".ingredients2" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href=".nutrition2" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h4 class="card-title">Item name</h4>&nbsp; &nbsp; &nbsp; <div class="tab-content mt-3">&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane active info2" role="tabpanel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane ingredients2" role="tabpanel" aria-labelledby="ingredients-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Ingredient list</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=ingredientList>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane nutrition2" role="tabpanel" aria-labelledby="nutrition-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Nutrition information</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=nutritionInfo>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp;&nbsp;&nbsp; <div class="card">&nbsp; &nbsp; <div class="card-header">&nbsp; &nbsp; &nbsp; <ul class="nav nav-tabs card-header-tabs navigation" role="tablist">&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link active" href=".info3" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link"&nbsp; href=".ingredients3" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link" href=".nutrition3" role="tab" aria-controls="nutrition" aria-selected="false" data-toggle="tab">Nutrition information</a>&nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="card-body">&nbsp; &nbsp; &nbsp; <h4 class="card-title">Item name</h4>&nbsp; &nbsp; &nbsp; <div class="tab-content mt-3">&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane active info3" role="tabpanel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="" target=_blank><button type="button" class="btn btn-primary">Full recipe</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href=""><button type="button" class="btn btn-primary">Add to favorites</button></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane ingredients3" role="tabpanel" aria-labelledby="ingredients-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Ingredient list</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=ingredientList>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Ingredient</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="tab-pane nutrition3" role="tabpanel" aria-labelledby="nutrition-tab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6 class="card-subtitle mb-2">Nutrition information</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul id=nutritionInfo>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Nutrition item</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; </div>