响应式选项卡
网页展示：
编辑器制作效果展示：
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d {position: absolute;margin: auto;left: 0;right: 0;width: 50%;min-width: 400px}
#u {display: flex;height: 50px}
#u li {text-align: center;line-height: 50px;list-style: none;flex: 1;margin-left: 10px}
#u li:hover {background-color: #02B2B5;color: white}
#d1 ul {display: none;flex-flow: column wrap;height: 800px}
#d1 ul li {background-size: cover;list-style: none;height: 210px;margin: 15px;width: 50%}
#d1 ul:nth-child(1) li {background: url("img/1.PNG") no-repeat}
#d1 ul li::before {content: "hello";display: block;transition: all 0.3s;font-size: 30px;opacity: 0;background-color: #02B2B5;color: white;height: 210px;text-align: center;line-height: 210px;transform: scale(0.8);border-radius: 30px}
#d1 ul li:hover::before {opacity: 0.8;transform: scale(1);border-radius: 0}
.act {display: flex !important}
.act1 {background-color: #02B2B5;color: white}
</style>
</head>
<body>
<div id="d">
<ul id="u">
<li class="act1">1</li>
<li>2</li>
<li>3</li>
</ul>
<div id="d1">
<ul class="act">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script>
var oli = document.querySelectorAll("#u li");
var oul = document.querySelectorAll("#d1 ul");
// 同步按钮与页面
for (var j = 0; j < oli.length; j++) {
oli[j].index = j;
oli[j].addEventListener("mouseover", function () {
for (var j = 0; j < oli.length; j++) {
oli[j].className = ""
}
for (var j = 0; j < oul.length; j++) {
oul[j].className = ""
}
this.className = "act1"
oul[this.index].className = "act"
var oli1 = oul[this.index].querySelectorAll("li");
// 图片加载
for (var i = 0; i < oli1.length; i++) {
oli1[i].style.background = "url(img/" + (this.index + 1) + ".PNG)";
console.log(this.index);
}
})
}
</script>
</body>
</html>
全部代码作于2019年-9月-21日
来源：https://blog.csdn.net/jiepp/article/details/101147315