69 lines
1.6 KiB
HTML
69 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<style>
|
||
body,ul,li,p {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.tabs_title {
|
||
display: flex;
|
||
}
|
||
.tabs_title li {
|
||
margin-right: 10px;
|
||
}
|
||
.tabs_content li {
|
||
display: none;
|
||
}
|
||
.content_active {
|
||
display: block !important;
|
||
}
|
||
.title_active {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<ul class="tabs_title">
|
||
<li class="title_active">公告</li>
|
||
<li>规则</li>
|
||
<li>安全</li>
|
||
<li>公益</li>
|
||
</ul>
|
||
|
||
<ul class="tabs_content">
|
||
<li class="content_active">公告的内容</li>
|
||
<li>规则的内容</li>
|
||
<li>安全的内容</li>
|
||
<li>公益的内容</li>
|
||
</ul>
|
||
</body>
|
||
<script>
|
||
// 第一步：为标题的所有li标签绑定点击事件
|
||
// 第二步：为点击的li加上激活类名，并删除其他li上的类名
|
||
|
||
// 获取 tabs_title 里面的所有li标签
|
||
var TitleLi = document.querySelectorAll(".tabs_title li")
|
||
var ContentLi = document.querySelectorAll(".tabs_content li")
|
||
|
||
// 遍历所有li标签
|
||
TitleLi.forEach(function (v,i) {
|
||
|
||
// 为每个li标签绑定点击事件
|
||
v.onclick = function () {
|
||
// 清除所有li标签上的类名
|
||
TitleLi.forEach(function (item,index) {
|
||
item.className = ""
|
||
ContentLi[index].className = ""
|
||
})
|
||
|
||
// 给你点击的那个li加类名
|
||
v.className = "title_active"
|
||
ContentLi[i].className = "content_active"
|
||
}
|
||
})
|
||
</script>
|
||
</html> |