Bootstrap使菜单项处于活动状态

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并使用.indexof更改href变量

的jsfiddle

Answer 2

不使用过滤器，而是尝试使用属性选择器https://www.w3schools.com/cssref/css_selectors.asp 。 我将采用的方法将切断第一个url路径段（ Regex以在斜杠后得到第一个单词 ），并定位包含该单词的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}] ）更改为$（'ul.nav li a [href * = '+ active_path +']“）

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));
});

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