Question

我尝试使用jquery从导航中初始化活动类，但到目前为止它仅在url中的菜单项之后没有其他内容时才有效。

例如，如果我继续使用用户site.com/users，代码可以正常工作，但是当我浏览控制器并给它参数时，它会消失，只需site.com/users/param1/param2

你可以在下面看到我的代码：

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.nav a[href="' + url + '"]').parent().addClass('active');

    // Will also work for relative and absolute hrefs
    $('ul.nav a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});

Answer 1

试试这个：

$('ul.nav a').filter(function () {
        return url.href.indexOf(this.href) >= 0;
    }).parent().addClass('active').parent().parent().addClass('active');

Answer 2

因此，假设您使用此格式/AAA/BBB/CCC/....的网址，因此此代码会使您的链接识别所有链接/AAA/BBB/...和/AAA/XXX/....，例如同一页面。

$(document).ready(function () {
    var url = window.location;

    // this will break your url and put parts in array for
    // first item is the one you call it page
    var urlParts = url.split("/"); 

    // will work only on links like /AAA
    $('ul.nav a[href="' + urlParts[0] + '"]').parent().addClass('active');

    // so we need to use custom filters
    $('ul.nav a').filter(function () {
        var hrefParts = this.href.split("/");
        return hrefParts[0]==urlParts[0];// so you need to check if they should be 0 or 1 based on how your links are like: /AAA/ or AAA
        // also in case your links are like absolute paths you need more effort.
    }).parent().addClass('active').parent().parent().addClass('active');
});

编辑：现在应该可以了。但你需要玩它。所以这就是我认为你可以做的整个想法，比如检查你的链接类型，根据你的情况你应该改变代码中的东西。

Bootstrap导航栏活动类

2 个答案: