Javascript 在内容选项卡之间切换，onclick事件

我是js的初学者，我的代码遇到了障碍

我目前的进展

我的代码：

函数更改图像（元素）{
var n，
图像数据=[
[
{
src:“http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
标题：“图像1.1的标题”
},
{
src:“http://cdn.memegenerator.net/images/300x/159304.jpg",
标题：“图像1.2的标题”
},
{
src:“http://uploads.neatorama.com/images/posts/114/82/82114/1433129672-0.jpg",
标题：“图像1.3的标题”
},
],
[
{
src:“http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
标题：“图像2.1的标题”
},
{
src:“https://upload.wikimedia.org/wikipedia/en/7/72/Beyonce_-_Formation.png",
标题：“图像2.2的标题”
}
],
[
{
src:“http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
标题：“图像3.1的标题”
},
{
src:“http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
标题：“图像3.2的标题”
}
]
];
如果（元素>-1）{
document.getElementById（'image'+element）.src=imageData[element][1].src；
document.getElementById（'caption'+元素）。innerHTML=imageData[element][1]。caption；
}否则{
对于（n=0；n

图像集1
图像集2
图1.1的标题
图2.1的标题
图3.1的标题

正如FrankerZ所提到的，创建一组可以在两者之间切换的div将是目前为止最简单的解决方案。下面是一个简单的例子：

document.queryselectoral（'#tabs>li'）.forEach（（el，index）=>
el.addEventListener（'单击'，（）=>{
document.querySelector（'#container>.active'）.classList.remove（'active'）；
document.querySelector（`container>：第n个子（${index+1}）`）.classList.add（`active'）；
})
);
#tabs li{
列表样式：无；
显示：内联块；
背景：#ACF；
填充物：5px10px；
光标：指针；
}
#容器>分区{
宽度：300px；
高度：200px；
填充：10px；
边框：1px实心#000；
显示：无；
}
#容器>分区活动{
显示：块；
}

表1
表2
表3
表4
表5

表1的内容
表2的内容
表3的内容
表4的内容
表5的内容
为什么不创建多个div，并根据您使用的选项卡隐藏/显示div？@FrankerZ感谢您的想法，在我看来，我从错误的角度处理问题