思路：
需要标题和页面内容两个部分，几个标题就对应几个页面，页面设置定位使其重叠，在美化一下css样式即可
当点击某个标题时，显示出与标题相关的内容，同时标题样式发生变化，然后关联需要展示的页面内容，切换标题的同时页面同时切换
1、获取元素；
2、for循环按钮元素添加onclick(点击) 或者 onm ousemove(移入)事件，这里用的是onclick事件；
3、点击标题时会有背景颜色，通过for循环实现当指向哪一个标题时给它添加背景，并且让其他标题的背景属性为空。
4、点击当前标题时同时展示内容。
HTML部分：
点击查看代码
<div class="box">
<div class="box_top">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="box_bottom">
<div><img src="./images/1.jpg" alt=""></div>
<div><img src="./images/2.jpg" alt=""></div>
<div><img src="./images/3.jpg" alt=""></div>
<div><img src="./images/5.jpg" alt=""></div>
</div>
</div>
CSS部分：
点击查看代码
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 400px;
border: 1px solid #000;
margin: 50px auto;
}
.box .box_top {
width: 100%;
height: 60px;
background: rgb(168, 203, 246);
display: flex;
text-align: center;
line-height: 60px;
}
.box .box_top span {
flex: 1;
cursor: pointer;
}
.box .box_bottom {
height: 540px;
width: 100%;
background: rgb(178, 216, 237);
position: relative;
}
.bgc {
background: rgb(226, 16, 16);
color: #fff;
}
.box .box_bottom div {
height: 540px;
width: 100%;
background: rgb(230, 132, 71);
font-size: 100px;
color: #fff;
position: absolute;
top: 0;
left: 0;
display: none;
}
.box .box_bottom div img {
width: 100%;
height: 100%;
}
.box .box_bottom div.show {
display: block;
}
JS部分：
点击查看代码
<script>
onl oad = function () {
//获取元素
var box = document.querySelector('.box')
var spans = box.querySelectorAll('span')
var divs = box.querySelector('.box_bottom').querySelectorAll('div')
console.log(divs);
// 标题切换
for (var i = 0; i < spans.length; i++) {
// 给每个span自定义一个叫做index的属性，值是i，作用是用来作为连接box_bottom的div元素
spans[i].setAttribute('index', i)
spans[i].onclick = function () {
for (var j = 0; j < spans.length; j++) {
// 当指向哪一个span时给它添加背景，并且让其他span的背景属性为空
spans[j].className = ''
divs[j].className = ''
}
this.className = 'bgc'
//切换内容
// 获得每次this指向哪一个span时代表的值，将其转为数值类型
var index = this.getAttribute('index') - 0
// 当前的div设置一个show的类型
divs[index].className = 'show'
}
}
}
</script>