通过JS手写Tab切换
1、HTML结构
只需要一个大盒子、ul(四个切换按钮)、四张图片
<div class="box">
<ul>
<li class="bg">风景一</li>
<li>风景二</li>
<li>风景三</li>
<li>风景四</li>
</ul>
<img src="./img/u5.jpg" class="show">
<img src="./img/u4.jpg">
<img src="./img/u3.jpg">
<img src="./img/u2.jpg">
</div>
2、CSS样式
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 500px;
border: 1px solid black;
margin: 200px auto;
}
.box ul {
display: flex;
justify-content: space-a