向同一页面添加多个Vanilla JavaScript选项卡

使用以下代码的变体，我成功地添加了一组香草JavaScript选项卡

然而，如何使用HTML中的相同类向一个页面添加多组JavaScript选项卡呢

我很难使用JavaScript为选项卡选择器和选项卡内容区域创建唯一的动态ID。如中所示，可访问标记需要这些唯一ID

var accessibletabbscontainers=document.querySelectorAll（'.accessibletabbscontainer'）；
var tabSelector=document.querySelectorAll（'.tab selectors>li'）；
var tabContent=document.querySelectorAll（'.tab contents>div'）；
var largeRandNumber=Math.floor（（Math.random（）*1000）+1000）；
forEach（函数（elem，indexAccessibleTabContainer）{
elem.setAttribute（'data-id'，indexAccessibleTabContainer）；
forEach（函数（singleTabSelector，i）{
var ariaControlTabContent='tab content-'+largeRandNumber+'-'+i+'''.'+indexAccessibleTabContainer；
var tabSelectorId='tab selector-'+largeRandNumber+'-'+i+''.'+indexAccessibleTabContainer；
singleTabSelector.setAttribute（'data-id'，i）；
singleTabSelector.setAttribute（'id'，tabSelectorId）；
setAttribute（'aria-controls'，ariaControlTabContent）；
tabContent[i].setAttribute（'data-id'，i）；
tabContent[i].setAttribute（'tabindex'，0）；
tabContent[i].setAttribute（'role'，'tabpanel'）；
tabContent[i].setAttribute（'id'，ariaControlTabContent）；
tabContent[i].setAttribute（'aria-labeledby'，tabSelectorId）；
如果（i==0）{
tabSelector[i].setAttribute（'aria-pressed'，'true'）；
}否则{
tabSelector[i].setAttribute（'aria-pressed'，'false'）；
tabSelector[i].setAttribute（'tabindex'，-1）；
}
});
});  
AbsElectrorClick（e）上的函数{
forEach（函数（AccessibleTabContainer，indexAccessibleTabContainer）{
var tabSelectorSelected=e.target；
var accessibletabcontainerselected=tabSelectorSelected.parentElement.parentElement；
如果（！tabSelectorSelected.classList.contains（'active-tab-selector'））{
var tabSelectorSelectedFromContainer=AccessibleBasContainerSelected.querySelectorAll（'.tab contents>div'）；
console.log（tabSelectorSelectedFromContainer）；
tabSelector.forEach（函数（singleTabSelected，i）{
如果（tabSelectorSelected.getAttribute（'data-id'）==tabContent[i].getAttribute（'data-id'））{
tabContent[i].classList.add（'tab-content-active'）；
}否则{
tabSelector[i].classList.remove（'active-tab-selector'）；
tabSelector[i].setAttribute（'aria-pressed'，'false'）；
tabSelector[i].setAttribute（'aria-selected'，'false'）；
tabSelector[i].setAttribute（'tabindex'，-1）；
tabContent[i].classList.remove（'tab-content-active'）；
}      
});
tabSelectorSelected.classList.add（'active-tab-selector'）；
tabSelectorSelected.setAttribute（'aria-pressed'，'true'）；
tabSelectorSelected.setAttribute（'aria-selected'，'true'）；
tabSelectorSelected.removeAttribute（'tabindex'）；
}
});
}
tabSelector.forEach（函数（tabSelector）{
tabSelector.addEventListener（'click'，ontAbsElectrorClick'）；
});
.wrapper{
最大宽度：960像素；
保证金：0自动；
}
.选项卡选择器{
显示：内联块；
}
.选项卡选择器>li{
填充：10px；
}
.tab选择器>.active选项卡选择器{
边框：1px实心#f00；
}
.选项卡内容{
显示：内联块；
}
.选项卡内容>div{
填充：10px；
边框：2倍实心#000；
高度：150像素；
宽度：150px；
显示：无；
}
.tab内容>.tab内容处于活动状态{
显示：块；
}

使用香草JavaScript访问选项卡

选项卡选择器1
选项卡选择器2
选项卡选择器3

选项卡内容1
选项卡内容2
选项卡内容3

选项卡选择器1
选项卡选择器2
选项卡选择器3

选项卡内容1
选项卡内容2
选项卡内容3
我解决了自己的问题。在
ontabselectrorclick
函数内部迭代的
forEach
循环中，我重构了代码，添加了以下行：

var tabSelectorSelected = e.target;
var accessibleTabsContainerSelected = tabSelectorSelected.closest('.accessible-tabs-container'); 
var tabSelectorsSelectedFromTabs = accessibleTabsContainerSelected.querySelectorAll('ul > li');

然后在一个
forEach
循环中，我使用
tabSelector=document.querySelectorAll（'.tab selectors>li'）；
）并循环所有选项卡
li
标记，而不仅仅是单击的元素引用的标记，我使用了
tabselectors=selectedfromtabs
，从选项卡元素（
li
tag）单击（
var-tabSelectorSelected=e.target；
），引用其父级
div
标记（
var-accessibleBasContainerselected=tabSelectorSelected.closed（'.accessible-tabs-container'）；
）中的选项卡元素

看。另外，我在这个答案中添加了正确的代码。下面是代码前后更有用的说明：

在单击事件处理程序中传递的
ontabselectroclick
函数中的
forEach
循环片段不正确

更正在单击事件处理程序中传递的
ontabselectrorclick
函数中的
forEach
循环片段


var accessibletabbscontainers=document.querySelectorAll（'.accessibletabbscontainer'）；
var tabSelector=document.querySelectorAll（'.tab selectors>li'）；
var tabContent=document.querySelectorAll（'.tab contents>div'）；
var largeRandNumber=Math.floor（（Math.random（）*1000）+1000）；
可访问BSCON
var tabSelector = document.querySelectorAll('.tab-selectors > li');

function onTabSelectorClick(e) {
   tabSelector.forEach(function() {
     // Code here
   });
}

var tabSelectorSelected = e.target;
var accessibleTabsContainerSelected = tabSelectorSelected.closest('.accessible-tabs-container'); 
var tabSelectorsSelectedFromTabs = accessibleTabsContainerSelected.querySelectorAll('ul > li');

function onTabSelectorClick(e) {
   tabSelectorsSelectedFromTabs.forEach(function() {
     // Code here
   });
}