jquery - 如何在一个页面上使用多个Tabbar

Question

您好，有这个用于 Tabber 的代码，但是当我在页面上使用一个标签栏时它工作正常，但对于页面上的多个标签栏不能正常工作。请记住，当 Tabbar 在页面上多次使用时，它是动态创建的，所以每次我的 html 都会具有相同的结构。例如，如果无序列表有 4 个 ID 分别为 1、2、3 和 4 的子项，那么另一个 Tabbar 将具有相同的 ID。

请帮忙解决这个问题。

我的代码如下:-

我想，我无法将逻辑置于 jquery 之上。

<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
</ul>    
<div id="tab-1" class="tab-content current">Lorem ipsum dolor sit amet</div>
 <div id="tab-2" class="tab-content">
             Duis aute irure dolor in
        </div>
        <div id="tab-3" class="tab-content">
            Ut enim ad minim veniam,
        </div>

脚本从这里开始----

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

Answer 1

问题是您通过它的 id 来挑选元素(该值在 html 页面中必须是唯一的)但您的目标是乘以此代码，因此必须更改它以便您通过它的类来挑选元素。此代码应该适合您:

 $('.parent[id^="tabbar"] ul.tabs li').click(function() {
      let tab_id = $(this).attr('data-tab');
      let id = $(this).closest('.parent').attr('id');
      $('#' + id +' ul.tabs li').removeClass('current');
      $('#' + id +' .tab-content').removeClass('current');
      $(this).addClass('current');
      $('#' + id +' .' + tab_id).addClass('current');
    })

 .tab-content {
      display: none;
    }

    div .current {
      display: block;
    }

    ul .current {
      display: list-item;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>FIRST TABBAR</p>
<div class="parent" id="tabbar1">
   <ul class="tabs">
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
      <li class="tab-link" data-tab="tab-2">Tab Two</li>
      <li class="tab-link" data-tab="tab-3">Tab Three</li>
    </ul>
    <div class="parent">
      <div class="tab-content tab-1 current">Lorem ipsum dolor sit amet</div>
      <div class="tab-content tab-2">Duis aute irure dolor in</div>
      <div class="tab-content tab-3">Ut enim ad minim veniam,</div>
    </div>
  </div>
  <p>SECOND TABBAR</p>
   <div class="parent" id="tabbar2">
   <ul class="tabs">
      <li class="tab-link current" data-tab="tab-1">Tab One</li>
      <li class="tab-link" data-tab="tab-2">Tab Two</li>
      <li class="tab-link" data-tab="tab-3">Tab Three</li>
    </ul>
    <div class="parent">
      <div class="tab-content tab-1 current">Lorem ipsum dolor sit amet</div>
      <div class="tab-content tab-2">Duis aute irure dolor in</div>
      <div class="tab-content tab-3">Ut enim ad minim veniam,</div>
    </div>
  </div>