活动菜单突出显示 - 主页仍然集中答案

【问题标题】：Active menu highlight– Home page still focused活动菜单突出显示 - 主页仍然集中
【发布时间】：2020-08-29 09:55:34
【问题描述】：

当我们第一次加载主页时，当前菜单（主页）被突出显示。但是当我们转到常见问题等其他页面时，尽管current 类归因于新的当前菜单（常见问题解答），但突出显示仍集中在主菜单上。

渲染

HTML

<div class="main-nav__main-navigation">
   <ul class="main-nav__navigation-box">
     <li>
          <a href="https://example.com">Accueil</a>
     </li>
     <li>
          <a href="https://example.com/services">Services</a>
     </li>
     <li class="current">
          <a href="https://example.com/faq">FAQ</a>
     </li>
     <li>
          <a href="https://example.com/blog">Blog</a>
     </li>
     <li>
          <a href="https://example.com/contact">Contact</a>
     </li>
   </ul>
</div>

CSS

.main-nav__main-navigation .main-nav__navigation-box>li:not(.search-btn).current::before,
.main-nav__main-navigation .main-nav__navigation-box>li:not(.search-btn):hover::before {
    transform: scale(1, 1);
    transform-origin: right center;
}

.main-nav__main-navigation .main-nav__navigation-box>li:not(.search-btn).current::after,
.main-nav__main-navigation .main-nav__navigation-box>li:not(.search-btn):hover::after {
    transform: scale(1, 1);
    transform-origin: right center;
}

.main-nav__main-navigation .main-nav__navigation-box>li.current>a,
.main-nav__main-navigation .main-nav__navigation-box>li:hover>a {
    color: var(--thm-base);
}

function dynamicCurrentMenuClass(selector) {
        let FileName = window.location.href.split('/').reverse()[0];

        selector.find('li').each(function () {
            let anchor = $(this).find('a');
            if ($(anchor).attr('href') == FileName) {
                $(this).addClass('current');
            }
        });
        // if any li has .current elmnt add class
        selector.children('li').each(function () {
            if ($(this).find('.current').length) {
                $(this).addClass('current');
            }
        });
        // if no file name return
        if ('' == FileName) {
            selector.find('li').eq(0).addClass('current');
        }
    }

【问题讨论】：

标签： javascript html css

【解决方案1】：

我看到了通过重置类或为每个页面赋予不同的活动属性来解决此问题的复杂解决方案，但我找到了一个最简单的解决方案，避免您编辑所有文件和属性。

以常见问题页面为例，您只需在地址旁边添加标签即可：

<a href="https://example.com/faq/#">FAQ</a>

它为我解决了这个问题，没有任何进一步的修改。

【讨论】：