Put active class on active nav bar in bootstrap

Question

I have a navigation bar like this:

  <li class="active">
    <a href="{% url 'website:wedding' %}">Home</a>
    </li>

    <li><a href="/todo_list/">To-do</a></li>

    <li><a href="/budget/">Budget</a></li>

Now, even if I am on To-do navigation bar the blue effect remains on Home nav only as there is class=active . How can I make it dynamic, so that if I am on To-do, the blue effect will comes on To-do nav bar.

Answer 1

This should work

$(document).ready(function(){
   $('.navbar').on('click','li',function(){
      $('.navbar').find('.active').removeClass('active');
      $(this).addClass('active');
   });
})