选项卡切换不适用于多张卡

bordax 发表于 Dev

紫ord

我正在创建一个应用程序，该应用程序可以生成多个卡，每个卡上都有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/[email protected]/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>

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

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

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

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

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Codepen上的问题示例

阿维

这是因为使用了类和href，请尝试以下示例：

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

        <div class="tab-pane ingredients" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <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=".info2" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  href=".ingredients2" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition2" 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 info2" 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>

        <div class="tab-pane ingredients2" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition2" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  
  <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=".info3" role="tab" aria-controls="info" aria-selected="true" data-toggle="tab">Info</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"  href=".ingredients3" role="tab" aria-controls="ingredients" aria-selected="false" data-toggle="tab">Ingredients</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=".nutrition3" 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 info3" 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>

        <div class="tab-pane ingredients3" role="tabpanel" aria-labelledby="ingredients-tab">
          <h6 class="card-subtitle mb-2">Ingredient list</h6>
          <ul id=ingredientList>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
            <li>Ingredient</li>
          </ul>
        </div>

        <div class="tab-pane nutrition3" role="tabpanel" aria-labelledby="nutrition-tab">
          <h6 class="card-subtitle mb-2">Nutrition information</h6>
          <ul id=nutritionInfo>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
            <li>Nutrition item</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-01-25

我来说两句

0 条评论

登录后参与评论

适用于Google Chrome（iOS应用）选项卡切换器的UICollectionViewLayout UI

显示隐藏不适用于选项卡

选项卡切换不适用于多张卡

选项卡切换不适用于多张卡

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用