SOURCE

$('.tabs').on('click','.tab',function(e){
    let index = $(this).index()
     $(".tabs .tab").removeClass("active")
    $(this).addClass("active")
    $(".content .tab-content").removeClass("active")
    $($(".content  .tab-content").get(index)).addClass("active")
})

$($('.tabs .tab').get(0)).click()

setTimeout(()=>{
$('.tabs').append('<div class="tab">关于22</div>')
$('.content').append('<div class="tab-content">关于2212312</div>')
},2500)

<div class="tabs">
    <div class="tab">首页</div>
    <div class="tab">美食</div>
    <div class="tab">关于</div>
</div>
<div class="content">
    <div class="tab-content">首页</div>
    <div class="tab-content">美食</div>
    <div class="tab-content">关于</div>
</div>

.tabs::after {
    content: "";
    clear: both;
    display: block;
}

.tabs .tab {
    float: left;
    line-height: 1;
    padding: 8px 15px;
    background-color: black;
    color: white;
    cursor: pointer;
}

.tabs .tab.active {
    color: red;
}

.content .tab-content {
    display: none;
}

.content .tab-content.active {
    display: block
}