Jquery Custom Tab

<ul class="tab_menu">
    <li data-cat="tab1" class="active">tab1</li>
    <li data-cat="tab2">tab2</li>
    <li data-cat="tab3">tab3</li>
</ul>
<div class="tab_content">
    <div class="tab_content_item tab1 active">
        Tab content 1
    </div>
    <div class="tab_content_item tab2">
        Tab content 2
    </div>
    <div class="tab_content_item tab3">
        Tab content 3
    </div>
</div>

.tab_content_item {
    display: none;
}

.tab_content_item.active {
    display: block;
}

ul.tab_menu {
    list-style: none;
    text-align: center;
}

ul.tab_menu li {
    display: inline-block;
    padding: 5px 10px;
}

ul.tab_menu li.active {
    color: #11c540;
}

$('ul.tab_menu li').click(function (e) {
    e.preventDefault();
    let current_cat = $(this).data('cat');
    //menu active
    let tab_menu = $(this).siblings();
    $(tab_menu).not($(this)).removeClass('active');
    $(this).addClass('active');
    // content acive 
    let tab_content = $(this).parent().next().children();
    $(tab_content).not('.' + current_cat).removeClass('active');
    $('.' + current_cat).addClass('active');
});