1

我使用 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");
4

4 回答 4

5

首先检测页面名称

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

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

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

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

于 2013-07-17T17:52:59.067 回答
2

例如。你讨厌一些页面：

你的菜单有一个下一个表格：

<ul>
    <li class="index">index</li>
    <li class="faq">faq</li>
    <li class="forum">forum</li>
</ul>

现在您检查页面的 url。

var index = window.location.pathname.split('/')[1];
$('ul.li').removeClass('active');
$('li.' + index).addClass('active');

利润！

于 2013-07-17T17:46:10.893 回答
1

您可以先查看 url 以检测页面名称，然后您可以将页面名称与您在 LI 上定义的类匹配。

if(document.location.href.indexOf('index')>-1) {
      $('li.index').addClass('active')
}

如果您愿意，也可以使用页面标题而不是 url 来执行此操作。

另一个技巧是为每个页面的 BODY 标签添加一个类，然后让 CSS 完成工作：

body.index li.index {
    background-color:#FF0000
}

body.aboutus li.aboutus {
  .... whatever
}
于 2013-07-17T17:38:58.333 回答
1

这是一个 jquery/javascript 免费解决方案的链接

http://www.webtrainingcentre.com/server-side-includes/tutorials/create-active-links-using-common-include/

我相信这会有所帮助。

于 2014-03-17T09:40:02.973 回答