所以基本上我想给一个类“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，所以可能会有一些错误。
谢谢你阅读这篇文章，祝你新年快乐。
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的“条件标签”，对于给定页面，这些标签实际上返回为“真”或“假”。注意，第二个链接检查多个blog/post条件（假设这是针对blog的）。
我不确定这对你有没有帮助。如果你正在使用wordpress，你可以在菜单中使用这个：
<?php
wp_nav_menu(array(
'theme_location' => 'header',
'menu_class' => 'navbar-nav px-0',
'depth' => 2,
'container' => false,
));
?
ul.navbar-nav [aria-current]:not([aria-current="false"])
此外，如果您有“子菜单”wordpress add。“子菜单”类添加到ul子菜单，您可以像这样为“子菜单”添加css。
ul.navbar-nav li ul.sub-menu [aria-current]:not([aria-current="false"])
这是我的最后一个网站，您可以查看：http://kimiaroz.com/
您可以使用简单的过滤器
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;
}
