Question

所以我使用Twitter Bootstrap 3构建我的前端，在这种情况下是简单的标签菜单。我正在努力使它工作，因为菜单链接不想在你点击它们时正确地突出显示。我的意思是，如果您点击about.php页面，该链接应该被标记为活动，因此应用了一些CSS样式。我在stackowerflow上看到了很多帖子，但它们只对我有用。例如，人们发布的一些jQuery代码会进行适当的突出显示，但会阻止链接起作用。

最后，我找到了一个解决方案，除非我使用分页，否则效果很好。让我解释一下：

以下是我的菜单的bootstrap html代码：

    <nav class="row">
    <ul class="nav nav-tabs nav-justified">
        <li><a href="index.php"> Home </a></li>
        <li><a href="about.php"> About Us </a></li>
        <li><a href="contact.php"> Contact Us </a></li>
        <li><a href="services.php"> Our Services</a></li>
        <li><a href="portfolio.php"> Portfolio </a></li>
    </ul>
<nav>

为了使菜单突出显示工作，我正在使用此javaScrpt代码：

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

因此，当我启动应用程序时，index.php被标记为活动状态，这很棒，如果我点击about.php，我将转到该页面，它也被标记为活动状态，这也很棒。但是因为我在index.php上有分页，并且我点击Pagination链接2 url将更改为：index.php？page = 2，并且突出显示将中断，index.php将不再被标记为活动状态。

有谁知道这里发生了什么，我们可以做些什么来解决这个问题？我对JS不太好。

Answer 1

不要仅使用window.location作为您的网址，请尝试使用：

var url = window.location.pathname;

如果您当前的网址为www.mywebsite.com/index.php?page=2，则上述内容应输出/index.php。

您可以使用url.replace('/', '')删除第一个斜杠。

编辑：

由于您的路径名可能有多个部分，例如/something/index.php，我们需要处理它。另一种方法是：

var urlpath = window.location.pathname;

在您的代码中，您有：

$('ul.nav a[href="' + url + '"]').parent().addClass('active');

您可以将选择器更改为：

$('ul.nav a[href="' + urlpath.split('/').pop() + '"]').parent().//...etc

这是一次分割和隔离index.php部分。 <{1}}当然会在其他网页上index.php或contact.php。

试试我刚刚创建的这个JSFiddle，显示上面的行：http://jsfiddle.net/N9SHq/

使用分页时，Bootstrap活动菜单突出显示中断

1 个答案: