按页面更改菜单项类别不单击答案

【问题标题】：Change menu item class by page not click按页面更改菜单项类别不单击
【发布时间】：2019-09-28 12:26:43
【问题描述】：

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

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

即使我通过 URL（不是导航点击）到达该页面，youarehere 仍处于活动状态。

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

谢谢

【问题讨论】：

作为网站的开发者，您应该能够知道当前选择的菜单项。
Add active class to menu item的可能重复

标签： css nav

【解决方案1】：

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

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

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

【讨论】：

嗨@Fredrik Nathorst，但是当所有页面使用相同的导航模板和正文标签时，如何在 Joomla 等 CMS 上完成？
Joomla 是否不像 Wordpress 那样，每个生成的页面无论是否来自同一个模板都具有唯一的类/页面 -ID？

【解决方案2】：

我在这个 stackoverflow 帖子中找到了一个解决方案 - 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');
        }
    });
});

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

【讨论】：