Javascript 多个嵌套选项卡

我在做标签。同一页上的多个选项卡工作正常，现在我正在尝试将选项卡添加到选项卡中。嵌套子制表符默认值为当前活动类，不会出现。我曾尝试在jquery中使用$（this）.parent（）和$（this）.closest（），但没有得到结果。在这里，我没有使用任何id，因为我希望在动态出现的同一页面上有多个制表符。有人能给我指出正确的方向吗？嵌套选项卡默认活动选项卡，我已经在HTML中添加了当前类，但由于每个循环，当前类正在删除。如何仅针对当前父选项卡，而不是子嵌套选项卡

函数atscTabs（）{
$（'.at tabs'）。每个（函数（索引，项）{
var$mainContainer=$（这个）；
var$menuContainer=$（this）.find（'.at-tabs-nav__项'）；
var$label=$（this）.find（'.at-tab-_-title_-text'）；
var$content=$（this）.find（'.at-tabs-content__项'）；
$content.hide（）；
//添加数据属性
$label.每个（函数（idx、ele）{
$（this.attr（'data-target'，idx）
});
$（$menuContainer[0]，$label[0]）.addClass（'current'）；
$（$content[0]）.show（）；
//显示当前选项卡内容
$（此项）。查找（'.at-tabs-nav__项'）。单击（函数（ele）{
//调试器；
$（this）.closest（'.at tabs'）.find（'.current'）.removeClass（'current'）；
$（此）.addClass（'current'）；
$（this）.find（'.at tab-_title_text'）.addClass（'current'）；
$（this）.closest（'.at tabs'）.find（'.at tabs content:first>.at-tabs-content\uu item'）.hide（）；
$（this）.closest（'.at tabs'）.find（'.at tabs content:first>.at-tabs-content\uu item'）.eq（parseInt（$（this）.find（'[data-target]'））.attr（'data-target'））.show（）
});
});
}
atscTabs（）
.tab扭曲{
宽度：500px；
保证金：0自动；
}
.at-tabs-nav__项目当前{
填充：10px 20px；
背景色：#3c98ff；
}
.在制表位导航{
显示器：flex；
填充：28px 0px；
}
a、 在标签标题处{
文字装饰：无；
字号：18px；
颜色：黑色；
}
.当前a.at-tabs-title{
颜色：#fff；
}
.at-tabs-nav___项目{
填充：10px 20px；
利润率：0.10px；
背景：#e1e1；
}
.在选项卡内容{
字体大小：16px；
填充：25px；
背景：#e1e1；
}
人力资源{
高度：5px；
背景颜色：绿色；
}
/*垂直标签*/
.在垂直方向{
显示器：flex；
}
.在垂直方向上.在标签导航方向上{
显示器：flex；
弯曲方向：立柱；
填充：28px 0px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。我们的精英是泰勒斯，卢克图斯·内克·乌兰科珀·马蒂斯，普尔文纳·达皮布斯·利奥。
ipsum dolor sit amet，是一位杰出的领导者。我们的精英是泰勒斯，卢克图斯·内克·乌兰科珀·马蒂斯，普尔文纳·达皮布斯·利奥。
我是项目内容。单击“编辑”按钮更改此文本。洛雷姆·伊普苏姆·多洛尔·斯尤斯，卢克图斯·内克·乌兰科珀·马蒂斯，普尔文纳·达皮布斯·利奥。
ipsum dolor sit amet，是一位杰出的领导者。我们的精英是泰勒斯，卢克图斯·内克·乌兰科珀·马蒂斯，普尔文纳·达皮布斯·利奥。
我是项目内容。单击“编辑”按钮更改此文本。洛雷姆·伊普苏姆·多洛尔·西特、阿德内克·乌兰科佩尔·马蒂斯、普尔文纳·达皮布斯·利奥。
问题在于
find
方法将在整个DOM子树中查找匹配项，因此当您将其应用于顶级选项卡时，它还将匹配子选项卡中的项

您可以通过使用
children
方法来解决这个问题，有时会链接到孙子辈。这样，您就可以控制在DOM树中检查和修改内容的深度

因此，改变这一点：

$(this).find('.at-tabs-nav__item').click(function(ele) {
  $(this).closest('.at-tabs').find('.current').removeClass('current');
  // ...

致：


函数atscTabs（）{
$（'.at tabs'）。每个（函数（索引，项）{
var$mainContainer=$（这个）；
var$menuContainer=$（this）.find（'.at-tabs-nav__项'）；
var$label=$（this）.find（'.at-tab-_-title_-text'）；
var$content=$（this）.find（'.at-tabs-content__项'）；
$content.hide（）；
//添加数据属性
$label.每个（函数（idx、ele）{
$（this.attr（'data-target'，idx）
});
$（$menuContainer[0]，$label[0]）.addClass（'current'）；
$（$content[0]）.show（）；
//显示当前选项卡内容
$（this）.children（'.at-tabs-nav'）。children（'.at-tabs-nav\u项'）。单击（函数（ele）{
//调试器；
$（this）.closest（'.at tabs'）。children（'.at tabs nav'）。children（'.current'）。removeClass（'current'）。children（'.current'）。removeClass（'current'）；
$（this.addClass（'current'）；
$（this）.find（'.at tab-_title_text'）.addClass（'current'）；
$（this）.closest（'.at tabs'）.find（'.at tabs content:first>.at-tabs-content\uu item'）.hide（）；
$（this）.closest（'.at tabs'）.find（'.at tabs content:first>.at-tabs-content\uu item'）.eq（parseInt（$（this）.find（'[data-target]'））.attr（'data-target'））.show（）；
ele.stopPropagation（）；
});
});
}
atscTabs（）
.tab扭曲{
宽度：500px；
保证金：0自动；
}
.at-tabs-nav__项目当前{
填充：10px 20px；
背景色：#3c98ff；
}
.在制表位导航{
显示器：flex；
填充：28px 0px；
}
a、 在标签标题处{
文字装饰：无；
字号：18px；
颜色：黑色；
}
.当前a.at-tabs-title{
颜色：#fff；
}
.at-tabs-nav___项目{
填充：10px 20px；
利润率：0.10px；
背景：#e1e1；
}
.在选项卡内容{
字体大小：16px；
填充：25px；
背景：#e1e1；
}
人力资源{
高度：5px；
背景颜色：绿色；
}
/*垂直标签*/
.在垂直方向{
显示器：flex；
}
.在垂直方向上.在标签导航方向上{
显示器：flex；
弯曲方向：立柱；
填充：28px 0px；
}

$(this).children('.at-tabs-nav').children('.at-tabs-nav__item').click(function(ele) {
  $(this).closest('.at-tabs').children('.at-tabs-nav')
                             .children('.current').removeClass('current')
                             .children('.current').removeClass('current');
  // ...