如何用jQuery控制同页面多组独立Tabs（含下拉菜单）

原代码的核心问题是使用全局选择器，导致操作会影响所有Tabs组。解决思路是以当前点击元素所在的.cat-tab容器为范围，仅操作该容器内的元素，实现各组独立控制。

修改后的完整代码 #

JavaScript 代码 #

$(document).ready(function() {
  // 下拉菜单切换：仅操作当前Tabs组内的下拉菜单
  $(".dropdown").click(function(e) {
    e.stopPropagation();
    // 找到当前点击元素所在的.cat-tab容器，再查找内部的dropdown-tab
    $(this).closest(".cat-tab").find(".dropdown-tab").toggleClass("active");
  });

  // 点击文档空白处关闭所有下拉菜单
  $(document).click(function(e) {
    if (!$(e.target).closest(".dropdown-tab, .dropdown").length) {
      $(".dropdown-tab").removeClass("active");
    }
  });

  // 绑定Tab项点击事件（排除下拉菜单容器）
  $(".tabs li:not(.dropdown_menu)").click(function() {
    show_hide_tabs($(this));
  });
  // 绑定下拉子项点击事件
  $(".tabs li.drop-link").click(function() {
    show_hide_tabs($(this));
  });

  // 核心切换函数：仅操作当前Tabs组内的元素
  function show_hide_tabs($el) {
    var tab_id = $el.attr("data-tab");
    // 获取当前元素所在的.cat-tab容器
    var $container = $el.closest(".cat-tab");
    
    // 仅移除当前组内的current类
    $container.find(".tabs li, .tab-content").removeClass("current");
    // 关闭当前组内的下拉菜单
    $container.find(".dropdown-tab").removeClass("active");
    // 为当前组内对应Tab内容添加current类
    $container.find("#" + tab_id).addClass("current");
    // 为当前组内对应Tab项添加current类
    $container.find(".tabs li[data-tab='" + tab_id + "']").addClass("current");
  }
});

CSS 代码（无需修改） #

.cat-tab {
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.tabs {
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
  border-bottom: 2px solid #e44e4e;
  z-index: 1;
}

.tabs li {
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs li.current {
  background-color: #e44e4e;
  color: #fff;
}

.tabs li.tab-link:last-child {
  float: right;
}

.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
}

.tab-content.current {
  display: block;
}

.tabs .dropdown-tab.active {
  display: block;
}

.tabs .dropdown {
  position: relative;
}

.tabs .dropdown-tab {
  position: absolute;
  width: 270px;
  top: 100%;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 90999;
  display: none;
}

.tabs .drop-link {
  width:100%;
  display: block;
  color: #222;
  padding: 10px 15px;
  cursor: pointer;
}

.tabs .drop-link:hover {
  background-color: #f2f2f2;
}

@media screen and (max-width: 576px) {
  .cat-tab {
    display: block;
    width:100%;
  }
}

HTML 多组Tabs示例 #

<!-- 第一组Tabs -->
<div class="cat-tab">
  <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 dropdown_menu"><span class="dropdown">View All</span>
      <ul class="dropdown-tab">
        <li class="drop-link" data-tab="tab-5">Tab 5</li>
        <li class="drop-link" data-tab="tab-6">Tab 6</li>
      </ul>
    </li>
  </ul>
  <div id="tab-1" class="tab-content current">sometext 1</div>
  <div id="tab-2" class="tab-content">sometext 2</div>
  <div id="tab-5" class="tab-content">sometext 5</div>
  <div id="tab-6" class="tab-content">sometext 6</div>
</div>

<!-- 第二组Tabs -->
<div class="cat-tab">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-10">Tab Ten</li>
    <li class="tab-link" data-tab="tab-11">Tab Eleven</li>
    <li class="tab-link dropdown_menu"><span class="dropdown">View All</span>
      <ul class="dropdown-tab">
        <li class="drop-link" data-tab="tab-12">Tab 12</li>
        <li class="drop-link" data-tab="tab-13">Tab 13</li>
      </ul>
    </li>
  </ul>
  <div id="tab-10" class="tab-content current">sometext 10</div>
  <div id="tab-11" class="tab-content">sometext 11</div>
  <div id="tab-12" class="tab-content">sometext 12</div>
  <div id="tab-13" class="tab-content">sometext 13</div>
</div>

关键修改点说明 #

1. 范围限定：通过$(this).closest(".cat-tab")获取当前点击元素所在的Tabs容器，后续所有操作都基于这个容器内的元素，避免影响其他组。
2. 下拉菜单控制：切换下拉菜单时，仅操作当前组内的.dropdown-tab，而非全局所有。
3. Tab切换逻辑：show_hide_tabs函数中，所有添加/移除current类的操作都限定在当前容器内，确保各组状态独立。
4. 文档点击优化：增加对.dropdown的判断，避免点击下拉触发按钮时误关闭菜单。

内容的提问来源于stack exchange，提问作者DLK