Bootstrap 3.3.1 - 突出显示当前导航菜单项

Question

我目前使用的脚本实际上运行良好，只要我保持我的文件结构如下：

http://website.com/
http://website.com/page1.php
http://website.com/page2.php
http://website.com/page3.php

但是当我使用 mod_rewrite 代码删除“.php”

http://website.com/
http://website.com/page1
http://website.com/page2
http://website.com/page3

我的导航突出显示脚本停止工作。

这是我实现代码的方式

HTML

<body id="page1">

JS

$(function() {

    //highlight the current nav
    //each of the following lines represents a different page
    $("#page1 a:contains('Page 1')").parent().addClass('active');
    $("#page2 a:contains('Page 2')").parent().addClass('active');



});

JS 中的 ID 查找每个 body 标签中的 ID，而说 ('Page 1') 的部分查找菜单中的项目以确定要突出显示的菜单项。正如我所说，它工作正常，直到带走 .php。我假设它与 js 中的 .parent 有关，但我不确定用什么替换它，或者如何使其正常工作。有什么建议吗？

Answer 1

如果每个页面中的 <body> 标签都包含唯一 ID，您可以检查该 ID 是否存在。

像这样（已更新）：

for(var i = 0; i < $(".menu-item").length; i++){
    var item = i+1;
    if($("#page"+item).length>0){
        $("li:nth-child("+item+")").addClass("active");
        break;
    }
}

UPDATE 您的更新 fiddle

Fiddle

Bootstrap 3.3.1 - 突出显示当前导航菜单项

Bootstrap 3.3.1 - Highlight Current Navigation Menu Item

jquery

menu-items

twitter-bootstrap

twitter-bootstrap-3