选项卡效果如下
image.png
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡2</title>
<!-- 公共样式 -->
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
html,body{
width: 100%;
height: 100%;
}
html{font-size: 10px;}
.tab{
width: 50rem;
height: 40rem;
border: solid 2px burlywood;
}
.tab-title{
width: 100%;
height: 5rem;
border-bottom: solid 2px burlywood;
display: flex;
justify-content: space-between;
}
.tt{
width: 50%;
height: 5rem;
line-height: 5rem;
cursor: pointer;
border-right: solid 2px burlywood;
text-align: center;
font-size: 1.6rem;
}
.tt:nth-of-type(1){
background-color:burlywood;
color: white;
}
.tt:hover{
background-color:burlywood;
color: aliceblue;
}
.tab-content{
/* 相对定位 */
position: relative;
width: 100%;
height: calc(100% - 5rem);
background-color: aqua;
}
.tc{
/* 绝对定位 */
position:absolute;
width: 100%;
height: 100%;
text-align: center;
}
.tc:nth-of-type(1){
display: block;
background-color:aquamarine;
}
.tc:nth-of-type(2){
display: none;
background-color:antiquewhite;
}
.tc:nth-of-type(3){
display: none;
background-color:aqua;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-title">
<div class="tt">标题1</div>
<div class="tt">标题2</div>
<div class="tt">标题3</div>
</div>
<div class="tab-content">
<div class="tc">内容1</div>
<div class="tc">内容2</div>
<div class="tc">内容3</div>
</div>
</div>
<!-- JS代码 -->
<script>
// 获取到3个标题标签
let tts = document.getElementsByClassName("tt")
// 循环给每个标题标签，添加鼠标进入事件
for(let i = 0; i < tts.length; i++){
// 给每个鼠标添加进入事件
tts[i].onmouseenter = function(){
// 当前鼠标进入了
console.log("鼠标进入了第" + i + "个标签")
// 获取所有内容标签
let tcs = document.getElementsByClassName("tc")
// 隐藏所有的内容标签
for(let j = 0; j < tcs.length; j++){
tcs[j].style.display = "none"
}
// 显示和标题编号相同的内容标签
tcs[i].style.display = "block"
// 高亮对应标题:取消所有标签高亮
for(let x = 0; x < tts.length; x++){
// 让所有的标题class="tt"
tts[x].classList = "tt"
}
// 让所有对应编号的标题，添加active名称
tts[i].classList = "tt active"
}
}
</script>
</body>
</html>