JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabsclicked">
    <ul>
        <li><a href="#d1">a1</a>
        </li>
        <li><a href="#d2">a2</a>
        </li>
        <li><a href="#d3">a3</a>
        </li>
    </ul>
</div>
<div class="contentdesc">
    <div id="d1">d1</div>
    <div id="d2">d2</div>
    <div id="d3">d3</div>
</div>

CSS

.active {
    color:red
}
.activenav {
    color:green;
}

JavaScript

var selector = '.tabsclicked ul li';

$(selector).on('click', function () {
    $(selector).removeClass('activenav');
    $(this).addClass('activenav');
    var linkshref = [];
    var clickedHref = $(this).find('a').attr('href');

    $('.tabsclicked ul li a').each(function (i, el) {
        if ($(el).attr('href') != clickedHref) {
            linkshref[i] = $(el).attr('href');
        }
    });
    for (var i = 0; i < linkshref.length; i++) {
        $(linkshref[i]).removeClass('active in');
    }
    $(clickedHref).addClass('active in');

});