88 lines
2.4 KiB
JavaScript
88 lines
2.4 KiB
JavaScript
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() { //渲染title
|
|
|
|
data.forEach( //循环
|
|
function(v, i) { //函数
|
|
document.querySelector(".title").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'col' : ''}">${v.title}</li>`; /*字符串 */
|
|
console.log(v)
|
|
|
|
document.querySelector(".content").innerHTML /*向网页上添加元素*/ += `<li class="${i == 0 ? 'active' : ''}"></li>`; /*字符串 */
|
|
|
|
}
|
|
|
|
)
|
|
var tltle1 = document.querySelectorAll(".title li")
|
|
var content1 = document.querySelectorAll(".content li")
|
|
tltle1.forEach(function(v, i) {
|
|
v.onclick = function() {
|
|
tltle1.forEach(function(item, ac) {
|
|
item.className = ""
|
|
content1[ac].className = " "
|
|
|
|
})
|
|
v.className = "col"
|
|
content1[i].className = "active"
|
|
currentIndex = i
|
|
RenderContent()
|
|
}
|
|
})
|
|
}
|
|
|
|
function RenderContent() {
|
|
var li = document.querySelectorAll(".content li")
|
|
li[currentIndex].innerHTML = ""
|
|
data[currentIndex].content.forEach(function(v) {
|
|
li[currentIndex].innerHTML += `<p>${v.text}</p>`
|
|
})
|
|
}
|
|
|
|
RenderTitle()
|
|
RenderContent() //这里为啥子加一个空方法
|