时间戳

首页 > 解决方案 > 突出显示当前菜单项？

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

问题描述

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

顺便说一句，我正在使用 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不太熟悉，所以可能会有一些错误。

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

标签： javascripthtmljquerycsswordpress

解决方案

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

推荐阅读