Make clicked tab active in Bootstrap

Question

I am using Django and integrated Bootstrap with Django. Here is my HTML code for the navigation bar:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">   <div class="container">     <div class="navbar-header">       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">         <span class="sr-only">Toggle navigation</span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#">Project name</a>     </div>     <div class="navbar-collapse collapse">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Home</a></li>         <li ><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Games <span class="caret"></span></a>           <ul class="dropdown-menu" role="menu">             <li><a href="#">RacingDNA</a></li>             <li><a href="#">Skater Game</a></li>            </ul>         </li>       </ul>     </div><!--/.nav-collapse -->   </div> </div> 

I have written the CSS for an active navigation bar also. Here, only one navigation bar is active. I want to make the clicked navigation bar active and thus apply my CSS. My CSS is working perfect for active navigation bar and for this situation only for one.

I googled and found a solution to add this jQuery:

$('.nav.navbar-nav > li').on('click', function (e) { e.preventDefault(); $('.nav.navbar-nav > li').removeClass('active'); $(this).addClass('active'); 

});

Now here is where I am stuck. I don't know where to write this jQuery.

I put this file in the static/js folder and named this code nav-bar.js. However, there is no improvement. Where am I going wrong and where am I making mistakes?

Answer 1

This solution didn't work when the href attribute of your links will be different from href="#". Why ? Simply because each click on a link triggers a request to the server. In your JS code, you add the method preventDefault() in order to avoid this basic behavior, but I think that not really your objective for this purpose, isn't it ?

To handle this kind of feature you can update your template code by adding something like this :

base.html

<div class="collapse navbar-collapse" id="tn-navbar-collapse">     <ul class="nav navbar-nav">         <li class="{% if nbar == 'home' %}active{% endif %}">             <a href="/">HOME</a>         </li>         ...     </ul> </div> 

views.py

def your_view(request):     ...     return render(request, 'yourtemplate.html', {'nbar': 'home'}) 

With this way, you don't have to manage this feature with javascript.

Answer 2

If you dont want to send any additional context from views then you can handle it like this with resolver_match:

<li {% if request.resolver_match.url_name == 'home' %}class="active"{% endif %}>     <a href="/">HOME</a> </li> 

where 'home' is the name given to your url pattern for / (probably '^$') in your urls.py. So obviously to use this you need to name all your url patterns, which is a good practice anyway.