代碼展示：<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選項(xiàng)卡</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;
/*圈定區(qū)域*/
}
.b {
border-bottom: solid 1px orange;
/*下劃線*/
height: 5rem;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
/*左右對(duì)齊*/
}
.cc {
flex: 1;
height: 5rem;
text-align: center;
line-height: 5rem;
font-size: 1.8rem;
}
.cc.active {
background-color: orange;
color: wheat;
}
.cc:hover {
/*鼠標(biāo)經(jīng)過動(dòng)態(tài)先死*/
background-color: orange;
color: white;
}
.f {
height: calc(100% - 5rem);
width: 100%;
position: relative;
/*相對(duì)定位*/
background-color: aquamarine;
}
.ee {
width: 100%;
height: 100%;
color: white;
text-align: center;
position: absolute;
/*絕對(duì)定位*/
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">標(biāo)題1</div>
<div class="cc">標(biāo)題2</div>
<div class="cc">標(biāo)題3</div>
</div>
<div class="f">
<div class="ee">內(nèi)容1</div>
<div class="ee">內(nèi)容2</div>
<div class="ee">內(nèi)容3</div>
</div>
</div>
<script>
let ccs = document.getElementsByClassName("cc")
for (let i = 0; i < ccs.length; i++) {
ccs[i].onmouseenter = function () {
console.log("鼠標(biāo)進(jìn)入了第" + i + "個(gè)標(biāo)題")
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>
