如何在导航列表(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; }