SOURCE

let prevInd = 0
$('.navList').children().click(function () {
    $('.mainList').children().eq(prevInd).css('display', 'none')
    $('.mainList').children().eq($(this).index()).css('display', 'block')
    prevInd = $(this).index()
})


// 根据数据动态生成菜单和内容
// let list = [
//     { key: '菜单1', value: '内容1' },
//     { key: '菜单2', value: '内容2' },
//     { key: '菜单3', value: '内容3' }
// ]
// for (let x = 0; x < list.length; x++) {
//     var nav = $("<div></div>").text(list[x].key);
//     $('.navList').append(nav)

//     var main = $("<div></div>").text(list[x].value);
//     $('.mainList').append(main)
// }
// let prevInd = 0
// $('.navList').children().click(function () {
//     $('.mainList').children().eq(prevInd).css('display', 'none')
//     $('.mainList').children().eq($(this).index()).css('display', 'block')
//     prevInd = $(this).index()
// })

<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;
}
.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;
}