如何在导航列表（twitter bootstrap）中保持活动链接？ [英] How to keep an active link in nav list (twitter bootstrap)?

问题描述

我想在点击链接时显示活动链接（例如，当用户在link1上时该链接保持活动状态）（我正在使用带有Twitter引导程序的Symfony2）

I would like to show an active link when the link is clicked (and that link stay active while the user is on link1 for example) (I'm using Symfony2 with Twitter bootstrap)

<ul class="nav nav-list">
  <li class="active"> <a href="/link1">Link</a> </li>
  <li class=""> <a href="/link2">Link</a> </li>
  <li class=""> <a href="/link3">Link</a> </li>        
</ul>

编辑

菜单模板在每个页面中作为一个块导入（我正在使用twig），例如对于link1.html.twig，我会：zh
{％include menu.html.twig％}

EDIT
The template of the menu is imported in each page as a block (I'm using twig), for example for link1.html.twig, I would have :
{% include menu.html.twig %}

代码html ...

code 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/中捕获完整的URL和页面名称page.html'，删除域名'http://yourdomain.com'，离开'forpage.html'

(Step 1) Pretty much you are capturing the full url and page name in the x variable 'http://yourdomain.com/page.html', deleting the domain name 'http://yourdomain.com' leaving you with '/page.html'

（步骤2）匹配链接具有值'/page.html'并将类'active'添加到它

(Step 2) Match the link that has the value '/page.html' and add the class 'active' to it

这篇关于如何在导航列表（twitter bootstrap）中保持活动链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！