Place Active class in a dynamic menu with Javascript

Question

I created a menu-controller.js file, which is responsible for taking the menu in my API and dynamically generating in my HTML pages I want to use it.

However, I need that when the user clicks on some menu option, it gets the effect of CSS :active. Could someone explain to me how I can do this?

menu-controller.js

const MenuController = (function () {

    let integration = new MenuIntegration({});

    const menu = function() {

        return sessionStorage.getItem("menu");

    };

    const init = function () {

        if (!menu()) {

            const menuArr = integration.getMenu();
            sessionStorage.setItem("menu", percorreMenu(menuArr));

        }

        $(".main-menu").html(menu());
    }

    function percorreMenu (menuArr)  {
        var menu = ""; 
        for (i = 0; i < menuArr.length; i++){
            let menuItem =  menuArr[i];
            menu += 
            `<li class="item-menu active">
                    <a href="${menuItem.link}"><i class="zmdi ${menuItem.icon}"></i> ${menuItem.label}</a>
            </li>`;   
        }

        $('.item-menu').click(function(e) {
            $('.item-menu').removeClass('active');
            $(this).addClass('active');
          });

          // verificar via JS:
          const href = [location.pathname, location.search].join('?');
          $('.item-menu[href="' + href + '"]').addClass('active');

        return menu;

    }

    return {
        init: init
    }

})();

$(document).ready(function () {
    MenuController.init();
});