时间戳

首页 > 解决方案 > 如何在一页上使用多个Tabbar

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

问题描述

嗨，有这个 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');
        })

标签： jqueryhtmlcss

解决方案

问题是您通过它的 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>

推荐阅读