突出显示当前菜单项？

Question

基本上，我正在尝试为当前页面的菜单项添加“current”类来突出显示它。 我已经尝试了一些我在这个网站上看到的片段，但是大多数都不起作用。这段代码对我来说几乎可以工作，但问题在于，尽管当前菜单项被正确地突出显示，但Home按钮也会被突出显示，无论我查看哪个页面。因此，如果我正在查看“存档”页面，则“存档”和“主页”都会被突出显示。

顺便说一下，我正在使用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并不是很熟悉，所以可能存在一些错误。

感谢您阅读这篇文章，祝您新年快乐。

- TogeBoshi

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的“条件标签”，它们可以有效地返回给定页面的“true”或“false”。请注意，第二个链接检查多个博客/文章条件（假设这是针对博客的）。

- Riley

Answer 2

我不确定这是否对您有帮助。 如果您正在使用WordPress，您可以在菜单中使用此功能：

<?php
   wp_nav_menu(array(
       'theme_location' => 'header',
     'menu_class' => 'navbar-nav px-0',
      'depth' => 2,
   'container' => false,
   ));

?>和WordPress会在你着陆当前页面时自动将aria-current="page"添加到你的“nav-link”中。 然后，你可以像这样为当前页面添加CSS属性。

ul.navbar-nav [aria-current]:not([aria-current="false"])

如果您在WordPress中有“子菜单”，请为ul子元素添加“.sub-menu”类，然后可以像这样为“子菜单”添加CSS。

ul.navbar-nav li ul.sub-menu [aria-current]:not([aria-current="false"])

这是我的最后一个网站，你可以查看它：http://kimiaroz.com/

- Amirhoseinh73

Answer 3

您可以使用简单的过滤器

add_filter('nav_menu_link_attributes', 'add_current_class_to_link', 10, 4);
function add_current_class_to_link($atts, $item, $args, $depth)
{
    $atts['class'] = $item->current ? 'current' : '';
    return $atts;
}

- Ihar Aliakseyenka