Javascript 如何切换活动链接？

我正在使用symfony2（MVC框架）和Twitter引导程序v3.0.0。每次单击链接时，我都试图切换

类“活动”

。我尝试了很多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>

$（文档）.ready（函数（）{
$（'ul.nav>li'）。单击（函数（e）{
e、 预防默认值（）；
$（'ul.nav>li'）。removeClass（'active'）；
$（this.addClass（'active'）；
});
});

---

我该怎么做呢？

当您不提供JS时，“修复”代码并不容易。 应该是这样的：

$('.navbar-nav li a').on('click', function() {
    $('.navbar-nav li').removeClass('active');
    $(this).parent('li').addClass('active');
});

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

样本

---

如果您只想将活动类设置为打开的链接，可以执行以下操作：

$('.navbar-nav li a').on('click', function() {
    $('.navbar-nav li').removeClass('active');
    $(this).parent('li').addClass('active');
});

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

{%set page\u route=app.request.attributes.get（“\u route”）%}

我没有看到您尝试过的jquery解决方案？请通过编辑您的问题来显示它们。它不起作用。当页面加载时，它返回到第一个链接。@baccourchtaieb，这是因为javascript不保持页面加载。您已将html设置为在页面加载时第一个链接处于活动状态。@sharf:我如何修复它？@Baccourchtaieb您需要一些javascript来检测您所处的页面，并在页面加载时运行Smamatti脚本的修改版本，以将活动链接更改为当前页面。