Question

这是我的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>

Answer 1

试一试：

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

Answer 2

试试这个

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

Answer 3

你可以尝试这可以帮助你

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

Answer 4

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

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

Answer 5

试试这个，

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

我希望这能解决你的问题。

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

5 个答案: