点击Tab标签页控制台未打印对应信息，这段JS代码问题出在哪？

首先揪出你代码里的核心问题：闭包导致的循环变量引用错误，简单说就是你在点击事件里误用了循环迭代时的element变量，而非当前实际被点击的元素。

问题根源 #

你通过forEach循环给每个.tabs a span绑定点击事件时，事件处理函数里引用的element是循环的迭代变量。当循环结束后，这个变量会固定指向最后一个遍历到的元素——所以不管你点击哪个标签，代码里的$element实际上都是最后那个span，自然无法正确判断你点击的是哪个标签，控制台也就不会输出预期内容。

修复后的代码示例 #

var main = function() { 
  "use strict"; 

  $(".tabs a span").toArray().forEach(function(element) { 
    $(element).on("click", function() { 
      // 关键：用$(this)获取当前触发点击的元素，而非循环时的element变量
      var $clickedTab = $(this); 
      
      // 重置标签激活状态
      $(".tabs a span").removeClass("active"); 
      $clickedTab.addClass("active"); 
      // 清空内容区
      $("main .content").empty(); 

      // 根据父元素位置判断点击的标签
      if($clickedTab.parent().is(":nth-child(1)")) { 
        console.log("FIRST TAB CLICKED"); 
      } else if($clickedTab.parent().is(":nth-child(2)")) {
        console.log("SECOND TAB CLICKED");
      } else if($clickedTab.parent().is(":nth-child(3)")) {
        console.log("THIRD TAB CLICKED");
      }
    }); 
  }); 
};

// 记得确保DOM加载完成后执行main函数
$(document).ready(main);

为什么这样能解决？ #

$(this)在事件处理函数中，指向的是当前触发点击事件的DOM元素，也就是你实际点击的那个span。这样每次点击都能精准获取到对应的元素，判断父元素的位置自然就准确了，控制台也能输出正确的内容。

额外优化建议 #

你也可以省去toArray()和forEach，直接用jQuery原生的each方法，写法更简洁：

var main = function() { 
  "use strict"; 

  $(".tabs a span").each(function() { 
    $(this).on("click", function() { 
      var $clicked = $(this);
      $(".tabs a span").removeClass("active"); 
      $clicked.addClass("active"); 
      $("main .content").empty(); 

      // 用index()获取父元素的位置（从0开始），用switch判断更清晰
      switch($clicked.parent().index()) {
        case 0:
          console.log("FIRST TAB CLICKED");
          break;
        case 1:
          console.log("SECOND TAB CLICKED");
          break;
        case 2:
          console.log("THIRD TAB CLICKED");
          break;
      }
    }); 
  }); 
};

$(document).ready(main);

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