使用服务器端包含，选择当前导航元素的选项有哪些? [英] Using server-side includes, what are options for selecting a current nav element?

问题描述

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

I'm using a 10-item unordered list as a navigation bar. Using SSI, I put the header and navigation bar into every file. I'd like a way to add class="active" to the ruleset of the currently active page (the current page's corresponding <li> will have a different style).

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

Including the file in every page means that, in the included file, none of the items can have the active class.

仅用几行代码就可以做到这一点吗? (使用jQuery/JS)

Is there a way to do this in just a few lines of code? (using jQuery/JS)

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

My other option is to match the last part of the URL to part of the href of the anchor within each list item.

解决方案:(由RomanGorbatko提供)

Solution: (courtesy of 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");

推荐答案

例如.您有一些页面:

• http://site.com/index/
• http://site.com/faq/
• http://site.com/forum/

• http://site.com/index/
• http://site.com/faq/
• http://site.com/forum/

您的菜单具有下一种形式:

And you menu has a next form:

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

现在，您检查页面的网址.

Now you check the url of your page.

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

获利！

这篇关于使用服务器端包含，选择当前导航元素的选项有哪些?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！