如何切换活动链路
How to switch an active link?
我使用symfony2 (MVC框架)和Twitter Bootstrap v3.0.0。每次点击链接时,我都试图切换class"active"
。我尝试了许多jquery解决方案,最好的一个不加载页面。下面是我的HTML代码:
<header class="navbar navbar-inverse navbar-fixed-top wet-asphalt" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="{{ path('portofolio_front_homepage') }}">Accueil</a></li>
<li><a href="{{ path('portofolio_front_about') }}">A propos</a></li>
<li><a href="{{ path('portofolio_front_projects') }}">Portfolio</a></li>
<li><a href="{{ path('portofolio_front_blog') }}">Blog</a></li>
<li><a href="{{ path('portofolio_front_contact')}}">Contact</a></li>
</ul>
</div>
</div>
</header><!--/header-->
Jquery代码:
<script type="text/javascript">
$(document).ready(function() {
$('ul.nav > li').click(function(e) {
e.preventDefault();
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
我该怎么做?
不容易'修复'你的代码,当你不提供JS。应该是这样的:
$('.navbar-nav li a').on('click', function() {
$('.navbar-nav li').removeClass('active');
$(this).parent('li').addClass('active');
});
http://jsfiddle.net/a3yFh/
如果你只是想将活动类设置为打开的链接,你可以这样做:
{% set page_route = app.request.attributes.get('_route') %}
<ul class="nav navbar-nav navbar-right">
<li {% if page_route == 'portofolio_front_homepage' %}class="active"{% endif %}><a href="{{ path('portofolio_front_homepage') }}">Accueil</a></li>
<li {% if page_route == 'portofolio_front_about' %}class="active"{% endif %}><a href="{{ path('portofolio_front_about') }}">A propos</a></li>
<li {% if page_route == 'portofolio_front_projects' %}class="active"{% endif %}><a href="{{ path('portofolio_front_projects') }}">Portfolio</a></li>
<li {% if page_route == 'portofolio_front_blog' %}class="active"{% endif %}><a href="{{ path('portofolio_front_blog') }}">Blog</a></li>
<li {% if page_route == 'portofolio_front_contact' %}class="active"{% endif %}><a href="{{ path('portofolio_front_contact')}}">Contact</a></li>
</ul>
相关文章:
- 链路翻转时的 DIV 背景图像交换
- 涡轮链路触发事件链,但随后发生正常导航(Rails 4)
- 如何在反应路由器上的链路中引用状态
- D3.js力导向图保持恒定的链路距离
- 节点和集群以及使用D3的集群到集群链路
- 链路衰落的奇怪行为
- 手机号码链路检测
- 显示链路去激活的消息
- 增加从节点a到节点b的链路之间的距离
- 只选择链路参数
- 如何切换活动链路
- 如何设置活动链路指示灯位置
- 如何在反应中通过链路路由器获取程序值
- 替换多个链路
- 如何设置链路的动态id
- ngRoute只对路由配置中的链路使用
- 当存在或不存在路由参数时,启用或禁用链路
- 分配给链路的快捷键不起作用
- AngularJS指令:链路和控制器之间的通信方式
- 反应路由器链路未在上下文中接收路由器