使用服务器端包含，选择当前导航元素的选项有哪些？

Question

我正在使用10个项目的无序列表作为导航栏。使用SSI，我将标题和导航栏放入每个文件中。我想要一种添加class="active"到当前活动页面的规则集中的方法（当前页面对应的规则<li>将具有不同的样式）。

在每个页面中包含文件意味着在包含的文件中，所有项目都不能具有活动类。

仅用几行代码就可以做到这一点吗？（使用jQuery / JS）

我的另一个选择是将URL的最后一部分与href每个列表项中锚点的一部分匹配。

解决方案：（由RomanGorbatko提供）

var tab = window.location.pathname.split("/");
tab = tab[tab.length - 1];  // This probably is not efficient - suggestions?
if (tab != "") $("#nav a#" + tab).addClass("active");

Answer 1

首先检测页面名称

var index = document.location.href.lastIndexOf("/") + 1;
var page = document.location.href.substring(index,document.location.href.length);

考虑到navbar在ul中具有类navbar，因此，比找到具有相同名称的li并向其添加活动类。

$('ul.navbar li').each(function() {
    $(this).removeClass('active');   
    if($.trim($(this).text()) == page) {
        $(this).addClass('active');
    } 
});

这将满足您的要求。注意：我假设li名称与页面名称相同