SOURCE

// 查找所有的标题元素
var nav = document.getElementsByClassName('navList')[0].getElementsByTagName('div')
var main = document.getElementsByClassName('mainList')[0].getElementsByTagName('div')
let prevInd = 0
for (let x = 0; x < nav.length; x++) {
    nav[x].onclick = function () {
        main[prevInd].style.display = 'none'
        main[x].style.display = 'block'
        prevInd = x
    }
}


// 根据数据动态生成菜单和内容
// let list = [
//     { key: '菜单1', value: '内容1' },
//     { key: '菜单2', value: '内容2' },
//     { key: '菜单3', value: '内容3' }
// ]
// var navBox = document.getElementsByClassName('navList')[0]
// var mainBox = document.getElementsByClassName('mainList')[0]

// for (let x = 0; x < list.length; x++) {
//     var nav = document.createElement('div')
//     nav.innerText = list[x].key
//     navBox.appendChild(nav)

//     var main = document.createElement('div')
//     main.innerText = list[x].value
//     mainBox.appendChild(main)
// }

// var nav = document.getElementsByClassName('navList')[0].getElementsByTagName('div')
// var main = document.getElementsByClassName('mainList')[0].getElementsByTagName('div')
// let prevInd = 0
// for (let x = 0; x < nav.length; x++) {
//     nav[x].onclick = function () {
//         main[prevInd].style.display = 'none'
//         main[x].style.display = 'block'
//         prevInd = x
//     }
// }

<div class="navList">
    <div>菜单1</div>
    <div>菜单2</div>
    <div>菜单3</div>
</div>
<div class="mainList">
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>


<!-- <div class="navList">
</div>
<div class="mainList">
</div> -->

.navList{
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.navList > div{
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
}
.navList > div:nth-child(1){
    background-color:red;
}
.navList > div:nth-child(2){
    background-color:blue;
}
.navList > div:nth-child(3){
    background-color:green;
}


.mainList{
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    color: white;
}
.mainList > div{
    display: none;
    font-size: 60px;
}
.mainList > div:nth-child(1){
    display: block;
}
.mainList > div:nth-child(1){
    background-color:red;
}
.mainList > div:nth-child(2){
    background-color:blue;
}
.mainList > div:nth-child(3){
    background-color:green;
}