使用服务器端包含，选择当前导航元素的选项都有哪些？
Posted
技术标签:
【中文标题】使用服务器端包含，选择当前导航元素的选项都有哪些？【英文标题】：Using server-side includes, what are options for selecting a current nav element?使用服务器端包含，选择当前导航元素的选项有哪些？ 【发布时间】：2013-07-16 09:36:40 【问题描述】：我使用 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");
【问题讨论】：
我通常在服务器端做这个。我将目标模板与导航中的 url 进行比较，并相应地应用该类。通过检查 window.location 然后为导航操作 html 可以使用 javascript 完成相同的操作。 （如添加类） jQuery add class .active on menu 的可能重复项 这是一个很棒的链接。谢谢 【参考方案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
【讨论】：
有趣。我没想过给<body> 上课；我会记住这个技巧的。我一直在寻找上面链接的 vimpyboy。感谢您的有趣回答！【参考方案2】：
例如。你讨厌一些网页：
http://site.com/index/ http://site.com/faq/ http://site.com/forum/你的菜单有下一个形式：
<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');
利润！
【讨论】：
谢谢！这可能是最简单的方法。 你应该从其他 li 中删除活动类。 @***sdestroy 我使用vipulsharma 评论更改了我的答案。
@vipulsharma：没有必要这样做，因为在包含的文件中，没有一个项目具有“活动”类（我通过这个 jQuery 每页添加它）【参考方案3】：
首先检测页面名称
var index = document.location.href.lastIndexOf("/") + 1;
var page = document.location.href.substring(index,document.location.href.length);
比找到同名的 li 并将 class active 添加到它 考虑到导航栏在 ul 中有类导航栏。
$('ul.navbar li').each(function()
$(this).removeClass('active');
if($.trim($(this).text()) == page)
$(this).addClass('active');
);
这将满足您的要求。 注意：我假设 li 名称与页面名称相同
【讨论】：
【参考方案4】：这是一个 jquery/javascript 免费解决方案的链接
http://www.webtrainingcentre.com/server-side-includes/tutorials/create-active-links-using-common-include/
我相信这会有所帮助。
【讨论】：
这是最聪明的方法webtrainingcentre.com/server-side-includes/… 无需使用任何javascript以上是关于使用服务器端包含，选择当前导航元素的选项都有哪些？的主要内容，如果未能解决你的问题，请参考以下文章