Javascript 单击编号div以显示/隐藏相同编号的表格

我有一系列的选项卡（div），它们在页面加载时被自动编号，还有一系列的表也被自动编号。什么是基于单击的div显示/隐藏表的简短jquery脚本。例如，“tab1”显示/隐藏“表1”，“tab2”显示/隐藏“表2”等

我希望能找到一种方法，将这部作品创作成无限数量的这对作品，而不是写作

$('.tab1').click(function(){
    $('.table1').toggle();
});

$('.tab2').click(function(){
    $('.table2').toggle();
});

每一个

编辑：

---

链接到示例：

for（var c=1；c
for（var c=1；c您可以这样做：

$('.tab1,.tab2,.tab3').on('click',function(){
    $('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});

$('.section div')

对于未知数量的表，在您的情况下，选择如下选项卡：

$('.tab1,.tab2,.tab3').on('click',function(){
    $('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});

$('.section div')

这里有完整的例子

默认情况下，我将表设置为隐藏，但如果希望在开始时显示，您可以在CSS中将其删除。
您可以这样做：

$('.tab1,.tab2,.tab3').on('click',function(){
    $('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});

$('.section div')

对于未知数量的表，在您的情况下，选择如下选项卡：

$('.tab1,.tab2,.tab3').on('click',function(){
    $('.table'+$(this).attr('class').substr($(this).attr('class').indexOf("tab") + 3)).toggle();
});

$('.section div')

这里有完整的例子

默认情况下，我将表设置为隐藏，但如果希望在开始时显示，您可以在CSS中删除它。
根据示例FIDLE中提供的标记，您可以使用单个事件侦听器和一些额外属性为任意数量的表实现这一点，如下所示：


document.querySelector（“.section”）.addEventListener（“单击”，函数（事件）{
var target=事件。目标，表；
if（table=target.dataset.table）
if（table=document.getElementById（table））
table.classList.toggle（“隐藏”）；
}，0）；
.section>div{
显示：内联块；
光标：指针；
利润率：0.5px；
边框：1px实心；
填充：3倍；
}
桌子{
边框：1px实心；
边界塌陷：塌陷；
边缘顶部：15px；
}
表.隐藏{
显示：无；
}
运输署{
边框：1px实心；
填充物：5px；
最小宽度：50px；
高度：30px；
}

表1
表2
表3
表1
表2
表3
给定Fiddle示例中提供的标记，您可以使用单个事件侦听器和一些额外属性为任意数量的表实现这一点，如下所示：


document.querySelector（“.section”）.addEventListener（“单击”，函数（事件）{
var target=事件。目标，表；
if（table=target.dataset.table）
if（table=document.getElementById（table））
table.classList.toggle（“隐藏”）；
}，0）；
.section>div{
显示：内联块；
光标：指针；
利润率：0.5px；
边框：1px实心；
填充：3倍；
}
桌子{
边框：1px实心；
边界塌陷：塌陷；
边缘顶部：15px；
}
表.隐藏{
显示：无；
}
运输署{
边框：1px实心；
填充物：5px；
最小宽度：50px；
高度：30px；
}

表1
表2
表3
表1
表2
表3
请提供HTML的相关摘录。添加了相关链接请提供HTML的相关摘录。添加了相关链接虽然对于已知数量的表是有效的解决方案，但问题特别要求对未知数量的表提供解决方案。这是一个简单的示例，以便更好地理解。对于未知数量，何菊st需要选择
$（'.section div'）
而不是
$（'.tab1、.tab2、.tab3'）
，而对于已知数量的表，问题特别要求为未知数量的表提供解决方案。为了更好地理解它，这是一个简单的示例。对于未知数量，他只需要选择
$（'.section div'））
而不是
$（'.tab1.tab2.tab3'）