Result

jQuery

$(document).ready(function() {
        //最初に表示するコンテンツ
        $('.area:first').show();
      //class="active"を追加
    $('.tab li:first').addClass('active');

    //クリックイベント
    $('.tab li').click(function() {
        $('.tab li').removeClass('active');
        $(this).addClass('active');
        $('.area').hide();
        $($(this).find('a').attr('href')).fadeIn();
        return false;
    });
});

css

.tab, .tab li, .tab li a {
    float: left;
    padding:3px;
    margin-right:2px;
}
.content {
    clear: both;
    overflow: hidden;
    width: 300px;
    border:1px solid #eee;
    height:300px;
}
.area {
    display: none;
}
.tab li.active {
    background: #eee;
}
.tab li.active a{
    color:red;
}

html

<ul class="tab">
    <li><a href="#tab1">tab1</a></li>
    <li><a href="#tab2">tab2</a></li>
    <li><a href="#tab3">tab3</a></li>
    <li><a href="#tab4">tab4</a></li>
</ul>
<div class="content">
    <div class="area" id="tab1"> 
        Tab1<br />Tab1<br />Tab1<br />Tab1<br />
    </div>
    <div class="area" id="tab2">
       Tab2<br />Tab2<br />Tab2<br />Tab2<br />
    </div>
    <div class="area" id="tab3">
        Tab3<br />Tab3<br />Tab3<br />Tab3<br />
    </div>
    <div class="area" id="tab4">
        Tab4<br />Tab4<br />Tab4<br />Tab4<br />
    </div>
</div>

Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.22/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7