突出显示当前菜单项？答案

【问题标题】：Highlight the current menu item?突出显示当前菜单项？
【发布时间】：2021-04-07 12:48:51
【问题描述】：

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

顺便说一句，我正在使用 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>

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不是很熟悉，所以可能会有一些错误。

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

【问题讨论】：

标签： javascript html jquery css wordpress

【解决方案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"，它有效地返回给定页面的“真”或“假”。请注意，第二个链接检查多个博客/帖子条件（假设这是针对博客的）。

【讨论】：

【解决方案2】：

我不确定这是否对您有所帮助。如果您使用的是 wordpress，您可以将其用于您的菜单：

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

?> 当您登陆当前页面时，wordpress 会自动将aria-current="page" 添加到您的“导航链接”中。然后你可以像这样添加css来属性当前页面

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

另外，如果你有 'sub-menu' wordpress 将 '.sub-menu' 类添加到 ul child，你可以像这样为 'sub-menu' 添加 css。

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

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

【讨论】：

【解决方案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;
}

【讨论】：