如何在导航列表（twitter bootstrap）中保持活动链接？答案

【问题标题】：How to keep an active link in nav list (twitter bootstrap)?如何在导航列表（twitter bootstrap）中保持活动链接？
【发布时间】：2012-11-05 01:30:45
【问题描述】：

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

<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，我会：
{% 包括 menu.html.twig %}

代码 html ...

等

任何帮助将不胜感激。

【问题讨论】：

链接是否转到单独的页面？或同一页面上的部分？
是的，链接转到单独的页面。所以每个链接都会刷新页面。

标签： jquery symfony twitter-bootstrap

【解决方案1】：

这应该工作:)

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' 添加到其中

【讨论】：

对于@Reveclaire 提供的演示案例，这应该可以工作并且是一个简洁的解决方案。但是，可能值得稍微详细解释一下。
感谢 Lavabeams！我添加了一个解释，希望这有帮助！ :)
当您使用包含来填充您的菜单时，这将最有效......不必在每个页面上都弄乱菜单。
活动类需要在li而不是a上，所以第二行应该是这样的： $('a[href="' + x + '"]').parent( 'li').addClass('active');
在 javascript 中执行此操作似乎很脏。

【解决方案2】：

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

Link1 处于活动状态，因为这是 Link1.html：

<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>

Link2 处于活动状态，因为这是 Link2.html：

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

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

【讨论】：

@VlDesignz 答案可能适合您。只需确保将其包装在文档就绪处理程序中即可。

【解决方案3】：

一种POCSS（普通的 CSS）方式来做到这一点：

在您的main.twig 文件中

<body class="{% block body_class 'home' %}">
<!-- stuff here -->
<ul class="nav nav-list">
  <li class="nav-home"> <a href="/">Link</a>Home</li>
  <li class="nav-about"> <a href="/about">About Us</a> </li>
  <li class="nav-contact"> <a href="/contact">Contact Us</a> </li>        
</ul>

在about_page.twig 模板中

{% block body_class 'page-about' %}

在您的CSS 文件中

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

这样做的好处是您可以根据 body 类设置在页面上设置其他内容，例如：

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

【讨论】：