JSFiddle - React, Tailwind, and code Playground

HTML

<a class="aren1" href="#">Магазины</a> / 
<a class="aren2" href="#">Услуги</a> / 
<a class="aren3" href="#">Кофе и рестораны</a>


<li class="aren1">содержание 1</li>
<li class="aren1">содержание 1</li>

<li class="aren2">содержание 2</li>
<li class="aren2">содержание 2</li>

<li class="aren3">содержание 3</li>
<li class="aren3">содержание 3</li>

CSS

li.aren1, li.aren2, li.aren3{
    display: none;
}

a.active {color: #ff9d07;}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function() {


jQuery(function(){


jQuery('a.aren1,a.aren2,a.aren3').click({x:0},function(e){
        e.preventDefault();
        if (this != e.data.x) {
            if (e.data.x) {
                    jQuery(e.data.x).removeClass('active');
                    jQuery('li.' + e.data.x.className).hide();
            }                
            jQuery('li.' + this.className).show();
            jQuery(this).addClass('active');
            e.data.x = this;
        }
    });

jQuery("a.aren1").click();
});
});