这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战。
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、tab选项名称区域
2、对应tab选项的图片区域
布局核心html代码如下：
<div class="tab_switch">
<ul>
<li>荷花池</li>
<li>东大门</li>
<li>博物馆</li>
<li>四重门</li>
</ul>
<div class="imgs">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
<img src="imgs/4.jpg">
</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，样式如下：
加完样式信息后的布局如下图：
三、Javascript特效
1、获取相关标签对象：tab名称选项标签、tab图片选项标签
let ul = document.getElementsByTagName("ul")[0]
let li = document.getElementsByTagName("li");
let img = document.getElementsByTagName("img");
2、为每个tab选项名称设置鼠标移入移出响应事件，当鼠标移入某个tab选项名称区域时，对应tab选项图片区域显示出相应图片；当鼠标移出tab选项名称区域时，整个页面回到初始状态，即第一个tab名称选项标签，和第一个tab图片选项标签。
for (let i = 0; i < li.length; i++) {
li[i].index = i;
li[i].addEventListener("mouseover", function() {
li[0].style.background = "gainsboro";
for (let j = 0; j < li.length; j++) {
img[j].style.display = "none";
}
this.style.background = "gray";
img[this.index].style.display = "block";
})
li[i].addEventListener('mouseout', () => {
// 箭头函数this指向为undefine
li[i].style.background = "gainsboro";
})
}
3、设置tab图片选项标签区域鼠标移出响应事件，当鼠标移出这个区域时，整个页面回到初始状态，同上一步的响应事件。
ul.addEventListener('mouseout', () => {
li[0].style.background = "gray";
for (let j = 0; j < li.length; j++) {
img[j].style.display = "none";
}
img[0].style.display = "block";
})
