html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/class.css">
</head>
<body>
<div id="navList" class="navList">
<h1 class="on"><span>标题一</span></h1>
<div class="content tabShow">
内容一
</div>
<h1><span>标题二</span></h1>
<div class="content">
内容二
</div>
<h1><span>标题三</span></h1>
<div class="content ">
内容三
</div>
</div>
<script src="js/class.js"></script>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
ul,ol,li{
list-style: none;
}
a{
text-decoration: none;
}
.navList{
width: 293px;
height: 426px;
background: white;
overflow: hidden;
}
.navList h1{
width: 293px;
height: 66px;
background-color: #747474;
color:white;
text-align: center;
margin-bottom: 11px;
line-height: 66px;
}
.navList h1.on{
background:#c60f69;
}
.content{
height: 194px;
width: 293px;
background: #efefef;
text-align: center;
display: none;
margin-bottom: 11px;
}
.tabShow{
display: block;
animation: ani 0.5s both;
}
@keyframes ani {
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
js部分
{
let navList = document.getElementById("navList");
let h1 = navList.getElementsByTagName("h1");
let div= navList.getElementsByTagName("div");
for( let i = 0 ; i <= h1.length-1 ; i++){
h1[i].index = i;
h1[i].addEventListener("click",function(){
for (let j=0;j<=h1.length-1;j++)
{
h1[j].className ="";
div[j].className ="content";
}
h1[i].className ="on";
div[i].className ="content tabShow";
});
}
}