Tab切换jQuery代码转ES6改写及问题排查求助

需求概述 #

• 获取所有锚点链接及其对应内容ID，默认隐藏非“active”状态的内容
• 点击锚点链接时，切换展示对应内容并更新active状态

原始HTML结构 #

<div class="navbar">
 <nav>
  <ul class="navTabs">
   <li class="active">
    <a href="#tab1"> Tab 1 </a>
   </li>
   <li>
    <a href="#tab2"> Tab 2 </a>
   </li>
   <li>
    <a href="#tab3"> Tab 3 </a>
   </li>
  </ul>
 </nav>
</div>
<div class="navcontent">
 <div class="content" id="tab1">
  <h4> Tab 1 </h4>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 <div class="content" id="tab2">
  <h4> Tab 2 </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
 </div>
 <div class="content" id="tab3">
  <h4> Tab 3 </h4>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
 </div>
</div>

原可运行的jQuery脚本 #

$('ul.navTabs').each(function() {
 var $active, $content, $links = $(this).find('a');
 $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
 $active.addClass('active');
 $content = $($active[0].hash);
 $links.not($active).each(function() {
  $(this.hash).hide();
 });
 $(this).on('click', 'a', function(e) {
  e.preventDefault();
  $active.removeClass('active');
  $content.hide();
  $active = $(this);
  $content = $(this.hash);
  $active.addClass('active');
  $content.show();
 });
});

挑战任务：转ES6版本的问题代码 #

你尝试改写的ES6版本无法正常运行，代码如下：

$("ul.navTabs > li").each((index, element) => {
 // keep track of tabs and associated content
 const anchorTag = $(element).find("a");
 let active = anchorTag;
 let content = anchorTag;
 const links = anchorTag;
 // if identifyUrlHash matches one of the links, use that as active tab
 // if no match found, use first link as initial active tab
 const identifyUrlHash = window.location.hash;
 active = $(links.filter(`[href="${identifyUrlHash}"]`)[0] || links[0]);
 active.addClass("active");
 content = $(active[0].hash);
 // hide the remaining content
 links.not(active).each(element, (subindex, subelement) => {
  $(subelement.hash).hide();
 });
 $(element).on("click", "a", (event) => {
  event.preventDefault();
  // old tab inactive
  active.removeClass("active");
  content.hide();
  // update variables with new link and content
  active = $(element);
  content = $(element.hash);
  // make tab active
  element.addClass("active");
  content.show();
 });
});

问题排查与修复 #

咱们来逐个梳理你代码里的关键问题：

1. 遍历对象错误：原代码是遍历整个ul.navTabs容器，你却改成遍历单个li元素，这会导致每个标签项单独处理，逻辑完全混乱——我们需要针对整个标签容器来统一管理所有链接和内容。

2. 变量初始化错误：你把active、content、links都初始化为单个li下的anchorTag，但links应该是整个标签容器下的所有a标签集合，而非单个li内的链接。

3. each循环参数错误：links.not(active).each(element, (subindex, subelement) => {...})里的第一个参数element是多余的，jQuery的each方法只需要传入回调函数。

4. 点击事件变量赋值错误：点击时你把active赋值为当前li的jQuery对象$(element)，但实际应该是被点击的a标签$(e.target)；content应该对应点击链接的哈希值$(e.target.hash)，而不是li元素的hash属性（li根本没有这个属性）。另外，你直接给原生DOM元素element调用addClass，应该用jQuery对象$(element)。

修复后的ES6版本代码 #

$('ul.navTabs').each((index, tabContainer) => {
  const $links = $(tabContainer).find('a');
  let $active, $content;

  // 初始化active标签：优先匹配URL哈希，否则取第一个链接
  const urlHash = window.location.hash;
  $active = $($links.filter(`[href="${urlHash}"]`)[0] || $links[0]);
  $active.addClass('active');
  $content = $($active[0].hash);

  // 隐藏非active的内容
  $links.not($active).each((_, link) => {
    $(link.hash).hide();
  });

  // 绑定点击事件
  $(tabContainer).on('click', 'a', (e) => {
    e.preventDefault();
    // 清除旧的active状态和内容显示
    $active.removeClass('active');
    $content.hide();

    // 更新为新的active标签和内容
    $active = $(e.target);
    $content = $(e.target.hash);

    // 设置新的active状态和显示内容
    $active.addClass('active');
    $content.show();
  });
});

这个版本完全保留了原jQuery代码的逻辑，同时用ES6的箭头函数、const/let语法重构，解决了你代码里的所有问题，可以正常实现Tab切换功能。

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