Question

在基于浏览器网址参数将 .active 类附加到Bootstrap导航栏元素时，我的现有jQuery存在一些问题。

问题是index.php将为与index.php匹配的navbar元素生成活动类，但是如果不存在index.php，则元素将不会显示为活动，传递查询时似乎会出现同样的问题。

例如inbox.php会产生 .active 类，而inbox.php？view = sent则不会产生任何效果。

以下是现有的jQuery，有人可以帮我解决index.php这个小问题和/或不显示 .active ，以及包含同一页面查询参数的链接。

$(document).ready(function () {
        var url = window.location;
        $('ul.nav a[href="'+ url +'"]').parent().addClass('active');
        $('ul.nav a').filter(function() {
             return this.href == url;
        }).parent().addClass('active');
});

.nav结构是默认的Bootstrap导航结构，没什么特别的。我曾尝试使用PHP来附加 .active 类但由于某种原因它不想玩得很好而且我使用了StackOverflow上关于PHP的代码并添加了 .active 元素。

提前致谢。

Answer 1

假设您的所有网页都有类似于.../myPage.ext?x=y的路径，其中ext是任意给定的网页扩展名php, html, etc.，则以下代码段获取当前页面，如果{@ 1}}移除查询字符串，则删除查询字符串通过在window.location分割'?'并获取当前页面的名称，然后它会在nav-bar中搜索匹配<a></a>的{{1}}。与你正在做的非常相似。

href

jquery将.active添加到bootstrap navbar

1 个答案: