javascript - 如何仅使用 javascript 设置事件导航项？

Question

我有一个侧边栏，里面有一个嵌套菜单。该菜单包含链接。我希望当前选定的菜单项具有 CSS 类 active。我该怎么做？

https://jsfiddle.net/1wjba46j/

我的js看起来像这样:

var loc = window.location.href;
$('.nav-side-menu ul li a').each(function () {
    var status = loc.indexOf($(this).attr('href')) > -1;
    // $(this).toggleClass('active', status);
    if (status) {
        $(this).closest('li').addClass('active');
    }
});

Answer 1

这是一个简单的 js 解决方案。

// put your mapping here
var mapping = {
    "http://example.org/page1": "css.path.to.your.element",
    "http://example.org/page2": "path.to.other.element",
}

$(function(){
    $(mapping[window.location.href]).addClass('active');
});

它只不过是页面 URL 和导航元素(它们的 CSS 路径)之间的简单映射。

此外，如果该(子)菜单中的某个项目处于事件状态，您可能希望展开该菜单。所以你需要添加这样的内容:

$(mapping[window.location.href]).parent("ul").prev("li").addClass("active").click()

根据需要添加错误检查。