I've created a file menu-controller.js, which is responsible for picking up the menu in my API and generating dynamically in my HTML pages I want to use it.
However, I need that, when the user clicks on any menu option, it has 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();
});