Bootstrap - 在导航栏上设置正确的活动类答案

【问题标题】：Bootstrap - Set properly active class on navbarBootstrap - 在导航栏上设置正确的活动类
【发布时间】：2017-01-31 09:18:47
【问题描述】：

这是我的base.html.twig 模板，其中有一个导航栏。我在导航栏的单击元素上设置活动类时遇到问题。

    <!DOCTYPE html>
    <html>
    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /><link rel="stylesheet" type="text/css" href=" {{asset ('public/css/jquery.dataTables.css')}}">
        <link href="{{asset ('public/css/bootstrap.min.css')}}" rel="stylesheet">
        <link href= "{{asset ('public/css/starter-template.css')}}" rel="stylesheet">
        <script type="text/javascript" charset="utf8" src="{{ asset ('public/js/jquery.js') }}"></script>
        <script type="text/javascript" charset="utf8" src="{{ asset ('public/js/jquery.dataTables.js') }}"></script>
        <script type="text/javascript" charset="utf8" src="{{ asset ('public/js/bootstrap.min.js') }}"></script>
        <script type="text/javascript" charset="utf8" src="{{ asset ('public/js/myscript.js') }}"></script>

    </head>
    <body>
        {% block body %}
        <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="">App</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active">
            <a href = "{{path('customers')}}" data-toggle="collapse" data-target="#customers">Customers</a>
            </li>
            <li>
            <a href = "{{path('sellers')}}" data-toggle="collapse" data-target="#sellers"">Sellers</a>
            </li>
            <li>
            <a href = "{{path('news')}}" data-toggle="collapse" data-target="#news">News</a>
            </li>
            <li>
            <a href = "{{path('about')}}" data-toggle="collapse" data-target="#about"">About</a>
            </li>
            <li>
            <a href = "#" data-toggle="collapse" data-target="#import">Import</a>
            </li>
          </ul>
        </div>
        </div>
        </nav>
        {% endblock %}
</body>
</html>

这是模板中包含的myscript.js，我用于在导航栏元素上设置active 类：

    $(".nav a").on("click", function(){
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
    });

为什么不工作？谢谢！

编辑

似乎是因为<a> 元素中定义的路径。有一个没有路径的列表，js 可以工作。关于如何使它与路径一起工作的任何想法？

编辑 2 - 我是如何解决的

感谢大家的帮助，终于在twig中使用这段代码解决了：

{% set route = app.request.attributes.get('_route') %}
      <ul class="nav navbar-nav">
        <li {{ route ==  'customers' ? 'class="active"' }}>
        <a href = "{{path('customers')}}" data-toggle="collapse" data-target="#clienti">Customers</a>
        </li>
        <li {{ route ==  'sellers' ? 'class="active"' }}>
        <a href = "{{path('sellers')}}" data-toggle="collapse" data-target="#venditori">Sellers</a>
        </li>
        <li {{ route ==  'news' ? 'class="active"' }}>
        <a href = "{{path('news')}}" data-toggle="collapse" data-target="#news">News</a>
        </li>
        <li {{ route ==  'about' ? 'class="active"' }}>
        <a href = "{{path('about')}}" data-toggle="collapse" data-target="#suggerimenti">About</a>
        </li>
     </ul>

【问题讨论】：

您确保您的 js 脚本设置正确的页脚或页眉？
js 似乎工作正常：bootply.com/0CcoAAXeGu 你确定不是因为它正在导航到另一个页面？
@illeas 是的，如您所见，我的脚本在标题中
@ZimSystem 再次检查后，看来您是对的。这是因为在 href 中定义的路径。

标签： javascript jquery css twitter-bootstrap-3 navbar

【解决方案1】：

试试看：

 $('li a').click(function(e) {
    e.preventDefault();
    $('a').removeClass('active');
    $(this).addClass('active');
});

【讨论】：

它不起作用。链接不起作用。如果我评论 e.preventDefault();行，链接可以正常工作，但活动类却不行。

【解决方案2】：

试试这个

$(".nav").on("click","a", function(e){
    e.preventDefault();
    $(".nav").find(".active").removeClass("active");
    $(this).closest('li').addClass("active");
});

【讨论】：

【解决方案3】：

我认为最好的方法是从导航中删除所有活动类，然后将活动添加到当前 a

jQuery('.nav li').On(click, function({
   jQuery('.nav li').removeClass('active');
   jQuery(this).parent().addClass('active');
});

【讨论】：

【解决方案4】：

试试这个，

$(document).on("click",".nav a", function(){
 $(".nav").find("li").removeClass("active");
 $(this).closest("li").addClass("active");
});

希望这能解决你的问题。

【讨论】：

谢谢，我很感激。我用解决方案编辑了问题。

【解决方案5】：

你可以试试这个可能对你有帮助

$(".nav li a").on("click", function(){ $(".nav").find(".active").removeAttr("class"); $(this).parent().attr("class","active"); });

【讨论】：