120 lines
2.8 KiB
HTML
120 lines
2.8 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>
|
|
<style>
|
|
body, ul,li{
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.tabs_title {
|
|
overflow: hidden;
|
|
}
|
|
.tabs_title li {
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
.title_active {
|
|
color: red;
|
|
}
|
|
|
|
.tabs_content li{
|
|
display: none;
|
|
}
|
|
.content_active {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<ul class="tabs_title">
|
|
</ul>
|
|
|
|
<ul class="tabs_content">
|
|
|
|
</ul>
|
|
|
|
</body>
|
|
<script>
|
|
var TabsList = [
|
|
{
|
|
title: '全部',
|
|
content: [
|
|
{ text: '全部的内容1', id: 1 },
|
|
{ text: '全部的内容2', id: 2 },
|
|
{ text: '全部的内容3', id: 3 }
|
|
]
|
|
},
|
|
{
|
|
title: '安全',
|
|
content: [
|
|
{ text: '安全的内容1', id: 3 },
|
|
{ text: '安全的内容2', id: 4 }
|
|
]
|
|
},
|
|
{
|
|
title: '论坛',
|
|
content: [
|
|
{ text: '论坛的内容1', id: 5 },
|
|
{ text: '论坛的内容2', id: 6 }
|
|
]
|
|
}
|
|
];
|
|
var tabsTitle = document.querySelector(".tabs_title");
|
|
var tabsContent = document.querySelector(".tabs_content");
|
|
|
|
function RenderTitle() {
|
|
TabsList.forEach(function (v,i){
|
|
console.log(tabsTitle)
|
|
tabsTitle.innerHTML += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
|
|
});
|
|
|
|
RenderContent()
|
|
}
|
|
|
|
function RenderContent() {
|
|
TabsList.forEach(function (v,i){
|
|
tabsContent.innerHTML +=
|
|
`
|
|
<li class="${i == 0 ? 'content_active' : ''}">
|
|
${
|
|
v.content.map(function (val,index){
|
|
return ` <div class="item">
|
|
<a href="./info.html?id=${val.id}">${val.text}</a>
|
|
</div>`
|
|
}).toString().replace(/,/ig, "")
|
|
}
|
|
|
|
</li>
|
|
`
|
|
});
|
|
|
|
TabsInit()
|
|
|
|
}
|
|
|
|
function TabsInit() {
|
|
var li = document.querySelectorAll(".tabs_title li");
|
|
var contentLi = document.querySelectorAll(".tabs_content li")
|
|
li.forEach(function (v,i){
|
|
v.onclick = function () {
|
|
li.forEach(function (val,index){
|
|
val.className = "";
|
|
contentLi[index].className = ""
|
|
})
|
|
v.className = "title_active";
|
|
contentLi[i].className = "content_active"
|
|
}
|
|
})
|
|
}
|
|
|
|
RenderTitle()
|
|
|
|
|
|
</script>
|
|
</html> |