JQuery中$(element)[index].addClass()方法失效问题求助

嘿，这问题我熟！你之所以调用addClass("active-content")没效果，是因为这里犯了一个很常见的小错误：你用数组索引取到的是原生DOM元素，而.addClass()是jQuery对象专属的方法，原生元素不认它。

具体来说，$(".tab-content")返回的是一个jQuery集合，当你用[index]去访问的时候，就把它转换成了原生的DOM节点，这时候再调用.addClass()自然会失效啦。

两种修复方法任你选 #

方法1：用jQuery的.eq()方法（推荐） #

.eq(index)会直接返回对应位置的jQuery对象，完美适配jQuery的所有方法，而且我们还得加上“先移除所有active类”的逻辑，不然点多个标签后会有多个内容显示：

$(".tag li").click(function () {
    var index = $(this).index();
    // 先清除所有tab-content的active状态，再给当前索引的添加
    $(".tab-content").removeClass("active-content").eq(index).addClass("active-content");
});

方法2：把原生元素转成jQuery对象 #

如果你习惯用数组索引的方式获取元素，也可以把拿到的原生DOM节点用$()包裹起来，转换成jQuery对象再调用方法：

$(".tag li").click(function () {
    var index = $(this).index();
    // 先移除所有active类
    $(".tab-content").removeClass("active-content");
    // 把原生元素包装成jQuery对象
    $($(".tab-content")[index]).addClass("active-content");
});

别忘了补全CSS样式 #

最后还要确保你的CSS里有对应的显示逻辑，不然就算加了类也看不到效果：

.tab-content {
    display: none; /* 默认隐藏所有内容 */
}
.tab-content.active-content {
    display: block; /* 只有带active类的内容显示 */
}

这样修改之后，点击标签就能正常切换对应的内容啦～

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