Javascript 带指示CSS的幻灯片放映

嗨，我想知道当点击我的工具栏上的一个部分时如何显示图像。到目前为止，我有一个可以在各个部分之间切换的工作动画，但我想在它下面显示图像。这是我第一次这么做，所以我完全不知道怎么做，非常感谢你的帮助

var indicator=document.querySelector（'.stefan indicator'）；
var items=document.querySelectorAll（'.stefan item'）；
功能手柄指示器（el）{
items.forEach（功能（项目）{
item.classList.remove（'is-active'）；
项目。删除属性（“样式”）；
});
indicator.style.width=”“.concat（el.offsetWidth，“px”）；
indicator.style.left=”“.concat（el.offsetLeft，“px”）；
indicator.style.backgroundColor=el.getAttribute（'active-color'）；
el.classList.add（'is-active'）；
el.style.color=el.getAttribute（'active-color'）；
}
items.forEach（函数（项、索引）{
item.addEventListener（'click'，函数（e）{
手持指示器（如目标）；
});
item.classList.contains（'is-active'）&&handleIndicator（item）；
});
.stefan{
利润率最高：4%；
显示：内联flex；
位置：相对位置；
溢出：隐藏；
最大宽度：100%；
背景色：继承；
填充：0 20px；
边界半径：40px；
/*盒影：0 10px 40px rgba（159162177.8）*/
显示器：flex；
证明内容：中心；
}
stefan先生项目{
颜色：252525；
填充：20px；
文字装饰：无；
过渡：0.3s；
边际：0.6px；
z指数：1；
字体系列：“开放式sans”，无衬线；
位置：相对位置；
光标：指针；
字号：500；
}
.stefan项目：之前{
内容：“；
位置：绝对位置；
底部：-6px；
左：0；
宽度：100%；
高度：5px；
背景色：#ffb833；
边界半径：8px 8px 0；
不透明度：0；
过渡：0.3s；
}
.stefan项：未（.s活动）：悬停：在之前{
不透明度：1；
底部：0；
}
.stefan项目：未（.i）处于活动状态：悬停{
颜色：#ffb833；
光标：指针；
}
.斯特凡指示器{
位置：绝对位置；
左：0；
底部：0；
高度：4px；
过渡：0.4s；
高度：5px；
z指数：1；
边界半径：8px 8px 0；
}

第一节
第2节
第三节
第四节
第五节
如果您尝试的是构建选项卡组件，那么您需要为默认情况下隐藏的每个选项卡创建元素，并且仅当代码告诉它时才会显示这些元素

因此，当单击带有section1内容的stefan项时，javascript应该告诉stefan-content-1更改其样式以显示：block（通过直接更改样式或添加类）

您可以在这里查看：或者使用现成的组件。引导、材料用户界面和其他系统都有用于拍摄的选项卡