Javascript 引导-在导航栏上正确设置活动类_Javascript_Jquery_Css_Twitter Bootstrap 3_Navbar

Javascript 引导-在导航栏上正确设置活动类

javascript jquery css twitter-bootstrap-3

Javascript 引导-在导航栏上正确设置活动类,javascript,jquery,css,twitter-bootstrap-3,navbar,Javascript,Jquery,Css,Twitter Bootstrap 3,Navbar,这是我的base.html.twig模板，其中有一个导航栏。在导航栏的单击元素上设置活动类时出现问题 <!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

这是我的

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>

为什么不工作？谢谢

编辑

这似乎是因为

试试看：

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

试试这个

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

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

$（“.nav li a”）。在（“单击”，函数（）{
$（.nav”）.find（.active”）.removeAttr（“类”）；
$（this.parent（）.attr（“类”，“活动”）；
});
我认为最好的方法是从导航中删除所有活动类，只需将活动类添加到当前的
jQuery('.nav li').On(click, function({
   jQuery('.nav li').removeClass('active');
   jQuery(this).parent().addClass('active');
});

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

我希望这能解决您的问题。您是否确保正确设置js脚本的页脚或页眉？js似乎工作正常：您确定这不是因为它正在导航到另一个页面吗？@illeas是的，正如您所看到的，我的脚本位于header@ZimSystem再次检查后，你似乎是对的。这是因为href中定义的路径。它不起作用。链接不起作用。如果我评论e.preventDefault（）；行，链接正常，但活动类无效。谢谢，我很感激。我用答案编辑了这个问题。
jQuery('.nav li').On(click, function({
   jQuery('.nav li').removeClass('active');
   jQuery(this).parent().addClass('active');
});

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