按页面更改菜单项 class 不点击

Question

自动将 CSS class 应用到 CMS（例如 Joomla 或任何 CMS）中页面的当前选定菜单项的最简单方法是什么？

在 Whosebug 网站上，当我点击侧面菜单时，我可以看到 class 'youarehere' 已应用于当前 li 标签，这是如何完成的？

即使我通过 URL（不是导航点击）到达页面，你在这里也是活跃的。

因为这是一件很常见的事情，我认为它很容易找到，但我已经搜索了几个小时。

谢谢

Answer 1

你需要使用javascript来实现这个，最简单（但最丑陋）的方法是在每个页面的正文中添加一个class，然后用它来改变选择的导航项css。

const body = document.querySelect('body');
body.classList.add('pageExample');

.pageExample .nav-item-example {color: red;}

Answer 2

我在这个 Whosebug 中找到了解决方案 post - Add active class to menu item 这适用于 Boostrap

$(document).ready(function () {
    var links = $('.navbar ul li a');
    $.each(links, function (key, va) {
        if (va.href == document.URL) {
            $(this).addClass('active');
        }
    });
});

感谢那些在这里回复的人，非常感谢

按页面更改菜单项 class 不点击

Change menu item class by page not click

css

nav