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() //这里为啥子加一个空方法