jQuery选项卡点击切换功能异常 附代码求排查解决

核心错误点 #

• 违反HTML id唯一性规范
  页面中重复使用了相同的id="tabs"和id="2021"，文档内id必须全局唯一。jQuery选择器匹配同id元素时，只会返回第一个出现的目标，直接导致嵌套tab的内容无法正确切换。
• 选择器覆盖范围错误
  原有JS中$('.tabs div .tabs div')的选择逻辑，仅能命中嵌套在二级tabs容器下的内容块，完全没有覆盖最外层两个tab的内容区（#4、#3）。初始化阶段没有隐藏非激活的外层tab内容，切换时也无法正确隐藏上一个激活块，最终所有内容同时展示。
• 事件绑定无作用域隔离
  点击事件中直接操作全局选择器$('.tabs ul li')，会清除所有层级tab的激活状态（包括嵌套在内层的tab样式），造成嵌套tab的样式显示错乱。

修复实现 #

1. 替换所有重复id为唯一值，遵守HTML规范，保证选择器定位准确。
2. 为每个tab容器做独立的初始化与事件绑定，避免全局操作影响嵌套层级的tab逻辑。
3. 初始化时统一隐藏每个tab容器下非默认激活的内容块，切换时仅操作当前作用域内的元素。

可直接运行的修复代码 #

调整后HTML #

<div class="tabs">
   <ul>
      <li><a href="#bed-4">4-Bedroom</a></li>
      <li><a href="#bed-3">3-Bedroom</a></li>
   </ul>
   <div id="bed-4">
      <div class="tabs">
         <ul>
            <li><a href="#year-2021-a">2021</a></li>
         </ul>
         <div id="year-2021-a" class="tab-content">
            <table>
               <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Fee</th>
               </tr>
               <tr>
                  <td>Peter</td>
                  <td>Griffin</td>
                  <td>$100</td>
               </tr>
               <tr>
                  <td>Lois</td>
                  <td>Griffin</td>
                  <td>$150</td>
               </tr>
               <tr>
                  <td>Joe</td>
                  <td>Swanson</td>
                  <td>$300</td>
               </tr>
               <tr>
                  <td>Cleveland</td>
                  <td>Brown</td>
                  <td>$250</td>
               </tr>
            </table>
         </div>
      </div>
   </div>
   <div id="bed-3">
      <div class="tabs">
         <ul>
            <li><a href="#year-2021-b">2021</a></li>
         </ul>
         <div id="year-2021-b" class="tab-content">
            <table>
               <tr>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Savings</th>
               </tr>
               <tr>
                  <td>Peter</td>
                  <td>Griffin</td>
                  <td>$100</td>
               </tr>
               <tr>
                  <td>Lois</td>
                  <td>Griffin</td>
                  <td>$150</td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.js" crossorigin="anonymous"></script>

调整后CSS #

.tabs ul li {
display: inline-block;
}
.tabs li a {
background: #937638;
padding: 10px;
color: #fff;
display: inline-block;
text-decoration: none;
}
/* 激活态样式区分 */
.tabs li.active a {
background: #6b5629;
}
table, td, th {  
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}

调整后JS #

// 遍历所有tab容器，独立完成初始化逻辑
$('.tabs').each(function() {
  const $tabScope = $(this);
  // 为当前tab域下的第一个导航项加激活样式
  $tabScope.find('ul li:first').addClass('active');
  // 隐藏当前tab域下所有内容块
  $tabScope.find('.tab-content, > div').hide();
  // 默认显示第一个导航项对应的内容
  const defaultTarget = $tabScope.find('ul li:first a').attr('href');
  $(defaultTarget).show();

  // 绑定当前tab域下的导航点击事件
  $tabScope.find('ul li').click(function(e) {
    e.preventDefault();
    const $currentLi = $(this);
    // 仅清除当前tab域内的激活状态
    $tabScope.find('ul li').removeClass('active');
    $currentLi.addClass('active');
    // 隐藏当前tab域下所有内容
    $tabScope.find('.tab-content, > div').hide();
    // 显示当前点击项对应的内容
    const targetPanel = $currentLi.find('a').attr('href');
    $(targetPanel).fadeIn();
  });
});

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