JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav nav-tabs nav-stacked main-menu mainmenu_user">
    <li class="active"><a href="/settings/" data-history="/settings/" data-href="/ajax/settings.php"><span class="hidden-tablet"> Настройки</span></a>

    </li>
    <li><a href="/settings/" data-history="/settings2/" data-href="/ajax/settings2.php"><span class="hidden-tablet"> Настройки2</span></a>

    </li>
    <li><a href="/settings/" data-history="/settings3/" data-href="/ajax/settings3.php"><span class="hidden-tablet"> Настройки3</span></a>

    </li>
</ul>

CSS

.active {
    background-color: #f60;
    padding: 2px 5px;
}
.active a {
    color: #fff;
}

JavaScript

$(document).ready(function () {
    var $mainmenu_user = $('.mainmenu_user');

    $mainmenu_user.find('li a').click(function (evt /**$.Event*/ ) {
        var $item = $(this);
        var ajaxUrl = $item.data("href");
        var historyUrl = $item.data('history');

        history.pushState({}, null, historyUrl);

        $mainmenu_user.find('.active').removeClass('active');
        $item.closest('li').addClass('active');

        $.getJSON(ajaxUrl, {}, function (json) {
            /* __ */
        });

        evt.preventDefault();
    })
});