代码展示：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%
}
html {
font-size: 10px
}
/*公共样式*/
.a {
width: 40rem;
height: 30rem;
border: solid 2px orange;
/*圈定区域*/
}
.b {
border-bottom: solid 1px orange;
/*下划线*/
height: 5rem;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
/*左右对齐*/
}
.cc {
flex: 1;
height: 5rem;
text-align: center;
line-height: 5rem;
font-size: 1.8rem;
}
.cc.active {
background-color: orange;
color: wheat;
}
.cc:hover {
/*鼠标经过动态先死*/
background-color: orange;
color: white;
}
.f {
height: calc(100% - 5rem);
width: 100%;
position: relative;
/*相对定位*/
background-color: aquamarine;
}
.ee {
width: 100%;
height: 100%;
color: white;
text-align: center;
position: absolute;
/*绝对定位*/
display: none;
}
.ee:nth-of-type(1) {
background-color: burlywood;
display: block;
}
.ee:nth-of-type(2) {
background-color: aquamarine;
}
.ee:nth-of-type(3) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="cc active">标题1</div>
<div class="cc">标题2</div>
<div class="cc">标题3</div>
</div>
<div class="f">
<div class="ee">内容1</div>
<div class="ee">内容2</div>
<div class="ee">内容3</div>
</div>
</div>
<script>
let ccs = document.getElementsByClassName("cc")
for (let i = 0; i < ccs.length; i++) {
ccs[i].onmouseenter = function () {
console.log("鼠标进入了第" + i + "个标题")
let ees = document.getElementsByClassName("ee")
for (let j = 0; j < ees.length; j++) {
ees[j].style.display = "none"
}
ees[i].style.display = "block"
for (let x = 0; x < ccs.length; x++) {
ccs[x].classList = "cc"
}
ccs[i].classList = "cc active"
}
}
</script>
</body>
</html>
