2

我想在单击链接时显示一个活动链接（例如，当用户在 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，我会：
{% include menu.html.twig %}

代码html...

ETC

任何帮助将非常感激。

4

3 回答 3

3

这应该工作:)

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”的链接并将类“活动”添加到其中

于 2012-11-05T03:26:59.037 回答
0

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

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>

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

于 2012-11-05T04:00:25.843 回答
0

一种POCSS（Plain Ol' 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; }
于 2016-01-06T20:44:29.860 回答