119 lines
2.9 KiB
HTML
119 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>tabs切换</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
.tabs_title {
|
||
overflow: hidden;
|
||
}
|
||
.tabs_title li {
|
||
float: left;
|
||
margin-right: 10px;
|
||
}
|
||
.tabs_content li {
|
||
display: none;
|
||
}
|
||
.active_title {
|
||
color: red;
|
||
}
|
||
.active_content {
|
||
display: block !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div class="tabs">
|
||
|
||
<ul class="tabs_title">
|
||
|
||
</ul>
|
||
|
||
<ul class="tabs_content">
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
<script>
|
||
|
||
// 假装这是后端给我们的json数据
|
||
var Tabs = {
|
||
status: 200,
|
||
result: {
|
||
tabs_title: [
|
||
{ id: 1, title: '公告' },
|
||
{ id: 1, title: '规则' },
|
||
{ id: 1, title: '论坛' },
|
||
{ id: 1, title: '论坛2' }
|
||
],
|
||
tabs_content: [
|
||
{ id: 1, title: '公告的内容' },
|
||
{ id: 1, title: '规则的内容' },
|
||
{ id: 1, title: '论坛的内容' },
|
||
{ id: 1, title: '论坛的内容2' }
|
||
]
|
||
}
|
||
};
|
||
|
||
// 获取两个父容器ul，为 innerHTML 做准备
|
||
var TabsTitle = document.querySelector(".tabs_title");
|
||
var TabsContent = document.querySelector(".tabs_content");
|
||
|
||
// 根据数据渲染标题的li标签
|
||
function RenderTitle() {
|
||
Tabs.result.tabs_title.forEach( function(val,index) {
|
||
TabsTitle.innerHTML += `<li class="${ index == 0 ? 'active_title' : '' }">${val.title}</li>`
|
||
} )
|
||
}
|
||
|
||
// 根据数据渲染内容的li标签
|
||
function RenderContent() {
|
||
Tabs.result.tabs_content.forEach( function(val,index) {
|
||
TabsContent.innerHTML += `<li class="${ index == 0 ? 'active_content' : '' }">${val.title}</li>`
|
||
} )
|
||
}
|
||
|
||
// 绑定点击事件，注意：一定要在 渲染标题和内容之后运行
|
||
function BindClick() {
|
||
// 获取标题的所有li标签
|
||
var TabsTitleLi = document.querySelectorAll(".tabs_title li");
|
||
// 获取内容的所有li标签
|
||
var TabsContentLi = document.querySelectorAll(".tabs_content li");
|
||
|
||
TabsTitleLi.forEach( function(val,index) {
|
||
|
||
val.onmouseover = function () {
|
||
|
||
TabsTitleLi.forEach(function(v, i){
|
||
v.className = ""
|
||
TabsContentLi[i].className = ""
|
||
})
|
||
|
||
val.className = "active_title"
|
||
TabsContentLi[index].className = "active_content"
|
||
}
|
||
|
||
} )
|
||
}
|
||
|
||
|
||
RenderTitle()
|
||
RenderContent()
|
||
|
||
BindClick()
|
||
|
||
|
||
</script>
|
||
</html> |