Javascript 活动菜单突出显示–;主页仍然是焦点

Javascript 活动菜单突出显示–;主页仍然是焦点,javascript,html,css,Javascript,Html,Css,当我们第一次加载主页时,当前菜单(主页)高亮显示。但是,当我们转到其他页面(如FAQ)时,尽管新的当前菜单(FAQ)提供了current类,但突出显示仍然集中在主菜单上 渲染 HTML CSS .main-nav\uuu main-navigation.main-nav\uuu navigation-box>li:not(.search btn).current::before, .main-nav\uu main-navigation.main-nav\uu na

当我们第一次加载主页时,当前菜单(主页)高亮显示。但是,当我们转到其他页面(如FAQ)时,尽管新的当前菜单(FAQ)提供了
current
类,但突出显示仍然集中在主菜单上

渲染

HTML


CSS

.main-nav\uuu main-navigation.main-nav\uuu navigation-box>li:not(.search btn).current::before,
.main-nav\uu main-navigation.main-nav\uu navigation-box>li:not(.search btn):hover::before{
变换:比例(1,1);
变换原点:右中心;
}
.main-nav\uu main-navigation.main-nav\uuu navigation-box>li:not(.search btn).current::after,
.main-nav\uu main-navigation.main-nav\uu navigation-box>li:not(.search btn):hover::after{
变换:比例(1,1);
变换原点:右中心;
}
.main-nav\u main-navigation.main-nav\u navigation-box>li.current>a,
.main-nav\uu main-navigation.main-nav\uu navigation-box>li:悬停>a{
颜色:var(--thm基);
}
JS

函数dynamicCurrentMenuClass(选择器){
让FileName=window.location.href.split('/').reverse()[0];
selector.find('li')。每个(函数(){
让anchor=$(this.find('a');
if($(anchor.attr('href')==文件名){
$(this.addClass('current');
}
});
//如果任何li有。当前elmnt添加类
selector.children('li')。每个(函数(){
if($(this).find('.current').length){
$(this.addClass('current');
}
});
//如果没有文件名,则返回
如果(''==文件名){
选择器.find('li').eq(0).addClass('current');
}
}

我见过一些复杂的解决方案,试图通过重置类或为每个页面指定不同的活动属性来解决这个问题,但我发现了一个最简单的解决方案,可以避免您编辑所有文件和属性

例如,对于FAQ页面,您只需在地址旁边添加一个标签:


它解决了我的问题,没有任何进一步的修改