142 lines
3.4 KiB
HTML
142 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>tabs_v2</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">
|
|
|
|
</ul>
|
|
|
|
<ul class="tabs_content">
|
|
|
|
</ul>
|
|
</body>
|
|
<script>
|
|
|
|
var data = [
|
|
{
|
|
title: '公告',
|
|
content: [
|
|
{ text: '公告的新闻1' },
|
|
{ text: '公告的新闻2' },
|
|
{ text: '公告的新闻3' },
|
|
]
|
|
},
|
|
{
|
|
title: '规则',
|
|
content: [
|
|
{ text: '规则的新闻1' },
|
|
{ text: '规则的新闻2' }
|
|
]
|
|
},
|
|
{
|
|
title: '安全',
|
|
content: [
|
|
{ text: '安全的新闻1' },
|
|
{ text: '安全的新闻2' },
|
|
{ text: '安全的新闻3' },
|
|
{ text: '安全的新闻4' },
|
|
]
|
|
},
|
|
{
|
|
title: '公益',
|
|
content: [
|
|
{ text: '公益的新闻1' },
|
|
{ text: '公益的新闻2' },
|
|
{ text: '公益的新闻3' },
|
|
{ text: '公益的新闻4' },
|
|
{ text: '公益的新闻5' },
|
|
]
|
|
},
|
|
{
|
|
title: '军事',
|
|
content: [
|
|
{ text: '军事的新闻1' },
|
|
{ text: '军事的新闻2' },
|
|
{ text: '军事的新闻3' },
|
|
{ text: '军事的新闻4' },
|
|
{ text: '军事的新闻5' },
|
|
]
|
|
}
|
|
];
|
|
var currentIndex = 0;
|
|
|
|
function RenderTitle() {
|
|
// var html = ""
|
|
// data.forEach(function (v,i) {
|
|
// console.log(v)
|
|
// html += `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`
|
|
// })
|
|
// console.log(html)
|
|
//
|
|
// document.querySelector(".tabs_title").innerHTML = html
|
|
|
|
|
|
|
|
data.forEach(function (v,i) {
|
|
|
|
document.querySelector(".tabs_title").innerHTML
|
|
+= `<li class="${i == 0 ? 'title_active' : '' }">${v.title}</li>`;
|
|
|
|
document.querySelector(".tabs_content").innerHTML
|
|
+= `<li class="${i == 0 ? 'content_active' : '' }"></li>`;
|
|
|
|
})
|
|
|
|
// 获取所有标题的li标签
|
|
var TitleLi = document.querySelectorAll(".tabs_title li");
|
|
var ContentLi = document.querySelectorAll(".tabs_content li");
|
|
|
|
// 为标题li绑定点击事件
|
|
TitleLi.forEach(function (v,i) {
|
|
v.onclick = function () {
|
|
TitleLi.forEach(function (item,index) {
|
|
item.className = ""
|
|
ContentLi[index].className = ""
|
|
})
|
|
v.className = "title_active"
|
|
ContentLi[i].className = "content_active"
|
|
|
|
currentIndex = i
|
|
RenderContent()
|
|
}
|
|
})
|
|
}
|
|
|
|
function RenderContent() {
|
|
var li = document.querySelectorAll(".tabs_content li");
|
|
li[currentIndex].innerHTML = ""
|
|
data[currentIndex].content.forEach(function (v) {
|
|
li[currentIndex].innerHTML += `<p>${v.text}</p>`
|
|
})
|
|
}
|
|
|
|
|
|
RenderTitle()
|
|
RenderContent()
|
|
</script>
|
|
</html> |