Javascript 如何为不同的选项卡集设置单独的行为？

我正在开发一个功能，其中我有不同的选项卡集。 我希望每一组标签都能独立工作。我的意思是：任何一组其他选项卡都必须干扰其他选项卡的行为

到目前为止，我在代码中遇到的唯一错误是，当您单击第一组的任何选项卡时，其他组的“选择”选项卡的内容将消失

我需要在默认情况下始终选择每个集合的第一个选项卡

这是一个

$（文档）.ready（函数（）{
$（'.tabs a:not（：first））.addClass（'inactive'）；
$（'.container'）.hide（）；
$（'.tabs'）.next（'.container'）.show（）；
$（'.tabs a'）。单击（函数（）{
var t=$（this.attr（'id'）；
if（$（this.hasClass（'inactive'））{//这是条件的开始
$（this）.兄弟姐妹（'a'）.addClass（'inactive'）；
$（this.removeClass（'inactive'）；
$（this.parent（）.nextAll（'.container'）.hide（）；
$（'#'+t+'C'）.fadeIn（'slow'）；
}
});
});
.tabs{
宽度：100%；
高度：30px；
边框底部：实心1px#CCC；
右侧填充：2px；
边缘顶部：30px；
}
a{
光标：指针；
}
.标签a{
浮动：左；
列表样式：无；
边框顶部：1px实心#ccc；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
右边距：5px；
边框左上半径：3px；
边框右上角半径：3px；
大纲：无；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：小；
字体大小：粗体；
颜色：#5685bc；
;
垫面：5px；
左侧填充：7px；
右侧填充：7px；
垫底：8px；
显示：块；
背景：#FFF；
边框左上半径：3px；
边框右上角半径：3px；
文字装饰：无；
大纲：无；
}
.不活动{
垫面：5px；
垫底：8px；
左侧填充：8px；
右边填充：8px；
颜色：#666666；
背景：#EEE；
大纲：无；
边框底部：实心1px#CCC；
}
.选项卡a：悬停，
.选项卡a.非活动：悬停{
颜色：#5685bc；
大纲：无；
}
.集装箱{
明确：两者皆有；
宽度：100%；
左边框：实心1px#CCC；
右边框：实心1px#CCC；
边框底部：实心1px#CCC；
文本对齐：左对齐；
填充顶部：20px；
}
.容器h2{
左边距：15px；
右边距：15px；
边缘底部：10px；
颜色：#5685bc；
}
.货柜{
左边距：15px；
右边距：15px；
边缘顶部：10px；
边缘底部：10px；
线高：1.3；
字体大小：小；
}
.集装箱ul{
左边距：25px；
字体大小：小；
线高：1.4；
列表样式类型：disc；
}
李先生{
垫底：5px；
左边距：5px；
}

测试1
测试2
测试3
测试4
1某些内容
2某些内容
3某些内容
4部分内容
测试1
测试2
测试3
测试4
5一些内容
6一些内容
7一些内容
8一些内容
测试1
测试2
测试3
测试4
5一些内容
6一些内容
7一些内容
8一些内容
想法很简单：

用div包装内容，就像包装标签一样（否则它们都是同级标签）

现在将inactive添加到选项卡的所有子级，每个选项卡的第一个子级除外

 $(".tabs a:not(:first-child)").addClass('inactive');

通过
.tabs+div
（将找到下一个同级div）将每个div内容作为目标，然后隐藏不是每个div的第一个子级的所有子级

$(".tabs + div > div:not(:first-child)").hide();

单击选项卡时，转到父项，然后转到下一步
div
查找所有子项（
.container
）并隐藏它们，然后显示单击的id

 $(this).parent().next('div').find('.container').hide();

此外，还修复了html，存在重复的id（确保id是唯一的）


$（文档）.ready（函数（）{
$（“.tabs a:not（：first child）”）.addClass（'inactive'）；
$（“.tabs+div>div:not（：first child）”）.hide（）；
$（'.tabs a'）。单击（函数（）{
var t=$（this.attr（'id'）；
if（$（this.hasClass（'inactive'））{//这是条件的开始
$（this）.兄弟姐妹（'a'）.addClass（'inactive'）；
$（this.removeClass（'inactive'）；
$（this.parent（）.next（'div'）.find（'.container'）.hide（）；
$（'#'+t+'C'）.fadeIn（'slow'）；
}
});
});
.tabs{
宽度：100%；
高度：30px；
边框底部：实心1px#CCC；
右侧填充：2px；
边缘顶部：30px；
}
a{
光标：指针；
}
.标签a{
浮动：左；
列表样式：无；
边框顶部：1px实心#ccc；
左边框：1px实心#ccc；
右边框：1px实心#ccc；
右边距：5px；
边框左上半径：3px；
边框右上角半径：3px；
大纲：无；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：小；
字体大小：粗体；
颜色：#5685bc；
;
垫面：5px；
左侧填充：7px；
右侧填充：7px；
垫底：8px；
显示：块；
背景：#FFF；
边框左上半径：3px；
边框右上角半径：3px；
文字装饰：无；
大纲：无；
}
.不活动{
垫面：5px；
垫底：8px；
左侧填充：8px；
右边填充：8px；
颜色：#666666；
背景：#EEE；
大纲：无；
边框底部：实心1px#CCC；
}
.选项卡a：悬停，
.选项卡a.非活动：悬停{
颜色：#5685bc；
大纲：无；
}
.集装箱{
明确：两者皆有；
宽度：100%；
左边框：实心1px#CCC；
右边框：实心1px#CCC；
边框底部：实心1px#CCC；
文本对齐：左对齐；
填充顶部：20px；
}
.容器h2{
左边距：15px；
右边距：15px；
边缘底部：10px；
颜色：#5685bc；
}
.货柜{
左边距：15px；
右边距：15px；
边缘顶部：10px；
边缘底部：10px；
线高：1.3；
字体大小：小；
}
.集装箱ul{
左边距：25px；
字体大小：小；
线高：1.4；
列表样式类型：disc；
}
李先生{
垫底：5px；
左边距：5px；
}

测试1
测试2
测试3
测试4
1某些内容
2某些内容
3某些内容
4部分内容
测试1
测试2
测试3
测试4
5一些内容
6一些内容
7一些内容
8一些内容
测试1
测试2
测试3
测试4
9一些内容
10一些内容
11一些内容
12一些内容
想法很简单：

像ho一样用div包装你的内容