Bootstrap-在导航栏上设置正确的活动类
[英]Bootstrap - Set properly active class on navbar
问题描述
This is my base.html.twig template, where I have a navbar. 
这是我的base.html.twig模板，其中有一个导航栏。 I have a problem setting the active class on the clicked elements of the navbar. 我在导航栏的单击元素上设置活动类时遇到问题。
<!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>
This is the myscript.js included in the template that I use to set the active class on navbar elements: 这是模板中包含的myscript.js ，我用于在navbar元素上设置active类：
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Why is not working? 为什么不工作？ Thanks! 谢谢！
EDIT 编辑
It seems it's because of the paths defined in the <a> element. 似乎是因为<a>元素中定义的路径。 Having a list without paths, the js works. 有一个没有路径的列表，js可以工作。 Any idea on how to make it work with paths? 关于如何使其与路径一起使用的任何想法吗？
EDIT 2 - How I solved 编辑2-我如何解决
Thanks everyone for the help, finally I solved using this code in 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>
5 个解决方案
解决方案1
0 2017-01-31 10:36:00
Try it : 试试吧 ：
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
解决方案2
0 2017-01-31 11:52:30
try this 尝试这个
$(".nav").on("click","a", function(e){
e.preventDefault();
$(".nav").find(".active").removeClass("active");
$(this).closest('li').addClass("active");
});
解决方案3
0 2017-01-31 11:52:48
你可以尝试这可能会帮助你
$(".nav li a").on("click", function(){ $(".nav").find(".active").removeAttr("class"); $(this).parent().attr("class","active"); });
解决方案4
0 2017-01-31 11:55:54
I think the best way is to remove all the active class from the nav and just add active to the current a 我认为最好的方法是从导航中删除所有活动类，而仅将活动类添加到当前
jQuery('.nav li').On(click, function({
jQuery('.nav li').removeClass('active');
jQuery(this).parent().addClass('active');
});
解决方案5
0 2017-01-31 11:57:16
Try this, 尝试这个，
$(document).on("click",".nav a", function(){
$(".nav").find("li").removeClass("active");
$(this).closest("li").addClass("active");
});
I hope this will solve your problem. 我希望这能解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.