如何在导航列表(twitter bootstrap)中保持活动链接?

我希望在单击链接时显示活动链接(例如,当用户在link1上时,该链接保持活动状态)(我正在使用Symfony2和Twitter引导程序)

 

编辑
菜单的模板作为一个块导入每个页面(我正在使用twig),例如对于link1.html.twig,我会:
{%include menu.html.twig%}

代码html …

等等

任何帮助将非常感激。

这应该工作:)

JQuery的

 var x = $(location).attr('href').replace( 'http://yourdomain.com' , ""); // Step 1 $('a[href="' + x + '"]').addClass('active'); // Step 2 

编辑

说明

(步骤1)几乎你在x变量’http://yourdomain.com/page.html’中捕获完整的URL和页面名称,删除域名’http://yourdomain.com’,留下你’ /page.html”

(步骤2)匹配具有值’/page.html’的链接,并将类’active’添加到其中

我假设每个页面都有你的导航元素。 您只需要更改哪个元素具有“活动”类。

Link1激活,因为这是Link1.html:

  

Link2激活,因为这是Link2.html:

  

如果您正在做一些比进入新页面更复杂的事情,请更新您的问题并解释,因为您的问题有点模糊,否则上述情况应该有效。

一个POCSS (Plain POCSS )方法:

在你的main.twig文件中

    

about_page.twig模板中

 {% block body_class 'page-about' %} 

在你的CSS文件中

 .page-about .nav-about, .page-home .nav-home, .page-contact .nav-contact { /* Active styles here */ } 

这样做的好处是,您可以根据身体类设置在页面上设置其他内容,例如:

 .page-about a { h1: green; } .page-home a { h1: blue; } .page-contact a { h1 : pink; }