javascript - 突出显示当前菜单项？

Question

所以基本上我试图给一个类“current”来突出显示当前页面的菜单项。我已经尝试了几个我在这个网站上看到的片段，但其中大部分都没有用。这段代码几乎对我有用，但问题是虽然当前菜单项正确突出显示，但无论我正在查看哪个页面，主页按钮也会突出显示。因此，如果我正在查看“存档”页面，存档和主页都会突出显示。

顺便说一句，我正在使用 Wordpress 构建网站，我知道 Wordpress 支持这种效果，但我想在没有它的情况下实现这一点。

HTML

<ul class="navigation">
 <li><a href="<?php echo home_url() ?>" class="navItem">Home</a></li>
 <li><a href="<?php echo home_url(/archive) ?>" class="navItem">Archive</a></li>
 <li><a href="<?php echo home_url(/about) ?>" class="navItem">About</a></li>
</ul>

JS

jQuery(function($) {
        $('.navigation li a').each(function() {
            var target = $(this).attr('href');
            if(location.href.match(target)) {
            $(this).addClass('current');
            } else {
            $(this).removeClass('current');
            }
    });
});

我不是很熟悉 javascript，所以可能会有一些错误。

感谢您阅读本文，祝您新年快乐。

Answer 1

wp_nav_menu 的建议在 WordPress 中是正确的方法，但如果您只是在寻找一个快速的解决方案并且菜单不会经常更改，您可以在里面检查一下每个列表项。

<ul class="navigation">
 <li><a href="<?php echo home_url() ?>" class="navItem <?php if( is_front_page() ): echo 'current'; endif; ?>">Home</a></li>
 <li><a href="<?php echo home_url(/archive) ?>" class="navItem <?php if( is_home() || is_archive() || is_single() ): echo 'current'; endif; ?>">Archive</a></li>
 <li><a href="<?php echo home_url(/about) ?>" class="navItem <?php if( is_page('About') ): echo 'current'; endif; ?>">About</a></li>
</ul>

这利用了 WordPress' "Conditional Tags"对于给定页面，它有效地返回为“true”或“false”。请注意，第二个链接检查多个博客/帖子条件(假设这是针对博客的)。