用原生js写出一个点击按钮变换出对应的东西（选项卡功能）。
话不多说，直接先上效果图：
html代码：
<style>
#bigbox {
width: 500px;
height: 400px;
border: 2px solid green;
box-sizing: border-box;
}
#bigbox img {
width: 100%;
height: 336px;
}
#boxtop {
width: 100%;
height: 60px;
display: flex;
box-sizing: border-box;
}
#boxtop span {
width: 100px;
height: 100%;
text-align: center;
line-height: 60px;
border: 2px solid yellowgreen;
box-sizing: border-box;
background-color: gray;
}
</style>
<body>
<p>1、选项卡</p>
<div id="bigbox">
<div id="boxtop">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<img src="img/0.png" id="imgs">
</div>
</body>
javascript代码：
<script>
let oSpan=document.querySelectorAll("span");
let imgs = document.getElementById("imgs");
for (let i = 0; i < oSpan.length; i++) { //遍历所有按钮（span）
oSpan[i].onclick = function() { //点击哪个按钮让哪个按钮做出相应操作
for(let j=0;j<oSpan.length;j++){ //遍历除过当前点击的按钮
oSpan[j].style.backgroundColor = "gray"; //让除过当前按钮的其他按钮变回原来的颜色（灰色）
}
this.style.backgroundColor = "pink"; //让当前点击的按钮变为粉色
imgs.src="img/" + i + ".png"; //根据当前的下标值变换图片的地址
}
}
</script>