57 lines
1.3 KiB
HTML
57 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
<style>
|
|
body,ul,li{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.tabs_top{
|
|
overflow: hidden;
|
|
}
|
|
.tabs_top li{
|
|
float: left;
|
|
}
|
|
.tabs_style{
|
|
color: red;
|
|
}
|
|
.tabs_color{
|
|
display: block !important;
|
|
|
|
}
|
|
.tabs_bottom li{
|
|
display: none
|
|
}
|
|
</style>
|
|
<body>
|
|
<ul class="tabs_top">
|
|
<li class="tabs_style">公告</li>
|
|
<li>规则</li>
|
|
<li>通知</li>
|
|
</ul>
|
|
<ul class="tabs_bottom">
|
|
<li class="tabs_color">公告的内容</li>
|
|
<li>规则的内容</li>
|
|
<li>通知的内容</li>
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
var Tabstitle = document.querySelectorAll(".tabs_top li")
|
|
var Tabscontent = document.querySelectorAll(".tabs_bottom li")
|
|
Tabstitle.forEach((val,index)=>{
|
|
val.onclick=()=>{
|
|
Tabstitle.forEach((v,i)=>{
|
|
v.className=""
|
|
Tabscontent[i].className=""
|
|
})
|
|
val.className="tabs_style"
|
|
Tabscontent[index].className="tabs_color"
|
|
}
|
|
})
|
|
</script>
|
|
</html> |