目标元素未在选项卡窗格中显示活动类

问题描述

我已经使用引导程序实现了选项卡，有 3 个选项卡，每个选项卡中都有内容，但是当我执行代码时，活动选项卡的所有内容都不可见，只有在单击任何其他选项卡后才能看到内容,在检查元素上检查时不显示活动类。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
  </li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
  <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
  Content.........                                    
  </div>
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
  Content.........                                    
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  Content.........
  </div>
</div>

in inspect div 元素只显示三个类（class="tab-pane fade show"）而不是活动类。

解决方法

@康拉德

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

将此脚本链接添加到您的shipify theme.liquid head 部分

 <a class="nav-link active" id="all-tab" data-toggle="tab"

数据切换需要一个你没有提到的唯一ID

你把相同的数据切换到相关标签ID

,

您需要将活动类添加到 li 标签并在您需要显示的第一个 div 中添加 in 类

演示代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <!--add active to li-->
  <li class="nav-item active">
    <a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
  </li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
  <!--added class in-->
  <div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
    Content1.........
  </div>
  <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
    Content2.........
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    Content3.........
  </div>
</div>