javascript - 如何切换事件链接?

标签 javascript jquery twitter-bootstrap symfony

我正在使用 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/

关于javascript - 如何切换事件链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24852835/

相关文章:

JavaScript 使用数组键/值对附加到对象

jquery - 获取2个字符之间的所有字符串

javascript - 使用 bootstrap 进行实时过滤器搜索

javascript - 为什么 Chrome 和 Firefox 呈现的 bootstrap CSS 与 Safari 不同

javascript - Tokenfield 不适用于 Bootstrap “has-error” 类

Javascript方式设计继承+隐私

javascript - 具有相同类名的各种div和onclick函数调用打开相应的消息div

javascript - 知道您是通过应用程序还是通过网站运行

jquery - 有没有更好的方法在 Coffeescript 中使用 => 在函数中调用 $(this) ?

css - Bootstrap 在打印聚焦输入元素时显示黑色矩形