标签页不能在同一页面上使用多个

Question

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

现在，我有一个无法使用多个选项卡的脚本部分。 它仅适用于第一个标签部分，并且我有6个以上的标签部分。 我在$('.tab-content').removeClass('current');上遇到问题 因为它会将当前类从各处删除。

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

我尝试了类似的东西

$('.products-category-list').closest('.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();?>

脚本

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

});

Answer 1

$(this).closest('ul.tab_click').find('li').removeClass('current');

将上面的代码替换为：

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

Answer 2

根据您的jsfiddle，我将您的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');

与

$(this).closest('ul.tabs').find('li').removeClass('current');

只选择当前选项卡的li，与该行相同

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