Question

我有这个网址www.url.com/photos，它会激活菜单上的“照片”项目。但是，如果我转到编辑页面www.url.com/photos/edit，活动项目将消失。我发现这是活动项目被控制的地方，但我如何制作它以便即使在我的编辑页面中也能保持活动状态？

这是我找到的代码

var url = window.location;
//    console.log(url);
    // var element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    var element = $('ul.nav a').filter(function() {
        return this.href == url;
    }).addClass('active').parent();

    while (true) {
        if (element.is('li')) {
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }

编辑：我最终找到了解决方案。感谢所有帮助过的人！

用这个替换我的代码

var element = $('ul.nav a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('li')) {
        element.addClass('active');
    }

Answer 1

检查以下小提琴你可以使用.indexof 并在代码

中使用this.href更改href变量

jsfiddle

Answer 2

如何使用属性选择器https://www.w3schools.com/cssref/css_selectors.asp而不是使用过滤器。我采取的方法将切断第一个网址路径段（Regex to get first word after slash in URL）并定位包含该字词的href。

const active_path = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');

// element is a vague variable name here, what is this element?
// maybe we could rename it to navigation_tab

const element = $(`ul.nav a[href*=${active_path}]`).addClass('active').parent();

// no idea what your while statement was trying to do,
// but passing while(true) will always be true so let's
// rewrite that to just be an if statement. You also don't
// need an else if you're just trying to accomplish one thing.
// This also is very unreadable code, as I have no idea what
// you're trying to accomplish. As you get better, you'll learn
// to create code that can read like a book and tell anyone what
// you're trying to accomplish. I would also encourage you to
// learn how to do these things without relying on jQuery. good luck!

if (element.is('li')) {
  element = element.parent().addClass('in').parent();
}

<强>修订

我想知道你是否真的不了解.parent（）是如何工作的。如果您尝试将类添加到父元素，则需要先使用parent（）。但我会先通过定义元素然后再添加你的类来分离这些问题。

const active_path = window.location.pathname.replace(/^\/([^\/]*).*$/, '$1');
const active_tab = $(`ul.nav li a[href*=${active_path}]`).parent();
active_tab.addClass('active');

https://codepen.io/jaruesink/pen/PmzKjo?editors=1111（有关更多详情，请参阅评论）

如果这对您不起作用，请仔细检查是否可以使用ES6语法。我建议在Chrome / Safari中开发或者弄清楚如何使用Babel。或者，如果您仍然无法使用ES6语法，则需要将const更改为vars，将$（ul.nav li a[href*=${active_path}]）更改为$（＆＃39; ul.nav li a [href * =＆＃39 + active_path +＆＃39;]＆＃39）

Answer 3

var storedListItem = sessionStorage.getItem('selectedListItem');
$("ul.nav > li > a:eq("+(storedListItem)+")").addClass("active");
$("ul.nav > li").on("click",function(){
    var index = $(this).index('ul.nav > li');
    var selectedListItem = index;
    sessionStorage.setItem('selectedListItem', JSON.stringify(selectedListItem));
});

这会将无序列表中的单击列表项设置为活动菜单项。

Bootstrap make菜单项处于活动状态

3 个答案: