如何在SB-Admin引导程序模板中突出显示所选的导航菜单？

Question

我在项目中使用SB-ADMIN引导程序模板。我想高亮一下所选的菜单。我试过这段代码，导航菜单会突出显示但是右边的容器没有加载。请找到附件。

$("#exampleAccordion").on("click", function(event){
    $("#exampleAccordion").find("li").removeClass('active');
    $(event.target).closest("li").addClass('active');
    event.preventDefault();
});

Answer 1

最好在脚本端处理它。如果您仍想使用js，请使用以下代码。这应该附在每个页面上。

假设您使用相对网址进行菜单链接。喜欢 /abc/cdf/chart.html 。如果不更改$(this).attr('href') == window.location.pathname条件

中的逻辑

$(document).ready(function(){
    $("#exampleAccordion a").each(function (index, element) {
        if ($(this).attr('href') == window.location.pathname) {
            $(this).parent().addClass("active");
        }
    });
});

代码将使用菜单网址检查当前网址路径，如果找到任何匹配项，则会将类（active）添加到父网站

Answer 2

按照@Aneesh的建议，但对于SB Admin 2，考虑到嵌套的折叠物品，我想到了这一点：

$(document).ready(function() {
    console.log(window.location.pathname);
    $("#accordionSidebar a").each(function(index, element) {
        if ($(element).attr('href') == window.location.pathname) {
            if ($(element).hasClass('collapse-item') == true) {
                $(element).parent().parent().parent().addClass("active");
                $(element).parent().parent().addClass("show");
                $(element).addClass("active");
            } else {
                $(element).parent().addClass("active");
            }
        }
    });
});