Bootstrap - Set properly active class on navbar
Question
This is my base.html.twig template, where I have a navbar. 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:
$(".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. Having a list without paths, the js works. Any idea on how to make it work with paths?
EDIT 2 - How I solved
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 answers
solution1
0 2017-01-31 10:36:00
Try it :
$('li a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
solution2
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");
});
solution3
0 2017-01-31 11:52:48
你可以尝试这可能会帮助你
$(".nav li a").on("click", function(){ $(".nav").find(".active").removeAttr("class"); $(this).parent().attr("class","active"); });
solution4
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');
});
solution5
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.