Javascript 选项卡不能与同一页面上的多个选项卡一起使用

我正在使用PHP。我从数据库中获取产品数据，并以选项卡方式显示

现在我有了一个脚本，它不适用于多个选项卡部分。它只适用于第一个选项卡部分，我有超过6个选项卡部分。我在

$（'.tab content'）上得到了这个问题。removeClass（'current'）因为它正在从everywhere中删除当前类

如果我单击第一个选项卡部分的第一个选项卡，那么它将从2-6个选项卡部分删除当前类

我试过类似的东西

$（'.products category list'）。最近（'.tab content'）。removeClass（'current'）

你能帮我解决这个问题吗

<?php while ($stmt->fetch()) { ?>
<section class="">
  <div class="container">
    <div class="products-category-list">
      <div class="a-tab">
        <ul class="tab_click">
          <li class="tab-link current" data-tab="tab-<?php echo $product_slug ?>1">Product1 Details</li>
          <li class="tab-link" data-tab="tab-<?php echo $product_slug ?>2">Product2 Details</li>
          <li class="tab-link" data-tab="tab-<?php echo $product_slug ?>3">Product3 Details</li>
          <li class="tab-link" data-tab="tab-<?php echo $product_slug ?>4">Product4 Details</li>
        </ul>
      </div>

      <div id="tab-<?php echo $product_slug ?>1" class="tab-content current">
        <div class="display_table">
          <p>
            <?php echo $productdetails1 ?>
          </p>
        </div>
      </div>
      <div id="tab-<?php echo $product_slug ?>2" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails2 ?>
          </p>
        </div>
      </div>
      <div id="tab-<?php echo $product_slug ?>3" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails3 ?>
          </p>
        </div>
      </div>
      <div id="tab-<?php echo $product_slug ?>4" class="tab-content">
        <div class="display_table">
          <p>
            <?php echo $productdetails4 ?>
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<?php }$stmt->close();?>

将上述代码替换为：

$('ul.tab_click li').removeClass('current');

将上述代码替换为：

$('ul.tab_click li').removeClass('current');

基于您的JSFIDLE，我会将您的javascript位替换为：

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $(this).closest('ul.tabs').find('li').removeClass('current');
        $(this).closest('.container').find('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})

所以我换了线

$('ul.tabs li').removeClass('current');

与

若要仅选择当前选项卡的li，请对该行执行相同操作

$('.tab-content').removeClass('current');

基于您的JSFIDLE，我会将您的javascript位替换为：

$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $(this).closest('ul.tabs').find('li').removeClass('current');
        $(this).closest('.container').find('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})

所以我换了线

$('ul.tabs li').removeClass('current');

与

若要仅选择当前选项卡的li，请对该行执行相同操作

$('.tab-content').removeClass('current');

您好，您可以添加由php代码生成的html代码来帮助我们解决这个问题吗issue@Rishab对不起，我找不到你。HTML代码也是一个问题。我正在分享这个链接中的代码示例，我只是指这个。我可以添加由php代码生成的html代码来帮助我们解决这个问题issue@Rishab对不起，我找不到你。HTML代码也是一个问题。我正在分享这个链接中的代码示例，我只引用了这个链接来获得答案，但它不起作用。因为它还将从第二个选项卡部分删除当前类。这就是选项卡功能。删除当前类的所有选项卡，只添加可单击元素。感谢您的回答，但它不起作用。因为它还将从第二个选项卡部分删除当前类。这就是选项卡功能。删除当前类的所有选项卡，只添加可单击元素。给我一些时间检查你的答案。我认为你的答案对我有用。给我一些时间来实现我的代码。我会尽快给你更新。给我一些时间检查你的答案。我想你的答案对我有用。给我一些时间来实现我的代码。我会尽快通知你。