Question

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

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

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

代码html ...

等

非常感谢任何帮助。

Answer 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'中捕获完整的网址和网页名称，删除域名'http://yourdomain.com'离开你使用'/page.html'

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

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

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

Answer 3

一个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 */
}

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

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

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

3 个答案: