Javascript 多选项卡列表：如何仅显示已单击选项卡列表的内容？

我有几个选项卡使用（'click'）上的事件

。问题是，每当我单击触发事件的选项卡时，它也会影响其他选项卡。如何防止它触发或影响其他选项卡

以下是我构建的选项卡示例-


$（文档）.ready（函数（）{
$（'.tabs列表li:first'）.addClass（'active'），
$（'.tab content.show content:first'）.addClass（'active'）；
$（'.tabs list li'）。单击（函数（e）{
event.preventDefault（）；
if（！$（this）.hasClass（'active'））{
var tabIndex=$（this.index（）；
var nthChild=tabIndex+1；
$（'.tabs列表li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$（'.tab content.show content'）.removeClass（'active'）；
$（'.tab content.show content:nth child（'+nthChild+'））.addClass（'active'）；
}
})
})
.tabs列表li{
显示：内联块；
}
.tab内容。显示内容{
显示：无
}
.tab content.show-content.active{
显示：块；
}


表1
表2

内容1
内容2

表1
表2

内容1
内容2
您可以尝试访问事件的目标节点及其信息，以确保执行

i、 e

这是在检查您是否确实单击了一个模式背景，但它应该具有类似的功能
您的页面中有多个
.tabs list
和
.tab content
，因此当您使用选择器
$（'.tabs list…'）
和
$（'.tab content…）
时，您不仅要选择单击的
.tabs列表
及其相应的
.tab内容
，还要选择所有的
.tabs列表
和
.tab内容

您需要坚持使用
$（this）
（表示单击的
.tabs列表
），并从
$（this）
中选择所有其他元素。jQuery提供了几个帮助程序来实现它，如
.parent（）
、
.find（）
和
.next（）

下面是使用这些帮助程序的代码的固定版本：


$（文档）.ready（函数（）{
$（'.tabs列表li:first'）.addClass（'active'），
$（'.tab content.show content:first'）.addClass（'active'）；
$（'.tabs list li'）。单击（函数（e）{
event.preventDefault（）；
if（！$（this）.hasClass（'active'））{
var tabIndex=$（this.index（）；
var nthChild=tabIndex+1；
//选择正确的元素
var$tabsList=$（this.parent（）；
var$tabContent=$tabsList.next（'.tab content'）；
$tabsList.find（'li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
$tabContent.find（'.show content'）.removeClass（'active'）；
$tabContent.find（'.show内容：第n个子（'+nthChild+'））.addClass（'active'）；
}
})
})
.tabs列表li{
显示：内联块；
}
.tab内容。显示内容{
显示：无
}
.tab content.show-content.active{
显示：块；
}


表1
表2

内容1
内容2

表1
表2

内容1
内容2
您需要链接选项卡列表和选项卡内容。
为选项卡列表添加了一个数据目标属性，该属性指向要链接选项卡的选项卡内容（或按照下面GG的建议使用next（））
见相应调整后的JS


$（文档）.ready（函数（）{
$（'.tabs列表li:first'）.addClass（'active'），
$（'.tab content.show content:first'）.addClass（'active'）；
$（'.tabs list li'）。单击（函数（e）{
event.preventDefault（）；
var tabParent=（$（e.currentTarget.parentElement））；
var targetId=tabParent.data（'target'）；
var tabContent=$（targetId）；
if（！$（this）.hasClass（'active'））{
var tabIndex=$（this.index（）；
var nthChild=tabIndex+1；
tabParent.find（'li.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
tabContent.find（'.show content'）.removeClass（'active'）；
tabContent.find（'.show content:nth child（'+nthChild+'））.addClass（'active'）；
}
})
})
.tabs列表li{
显示：内联块；
}
.tab内容。显示内容{
显示：无
}
.tab content.show-content.active{
显示：块；
}


表1
表2

内容1
内容2

表1
表2

内容1
内容2
在问题中张贴您的代码
function modalBackgroundClick(e) {
    if (e.target.id == "modalContainer") {
        modalContainer.style.display = "none";
    }
}