将活动类放在bootstrap中的活动导航栏上

Question

我有一个这样的导航栏：

  <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>

现在，即使我在待办事项导航栏上，蓝色效果仍然只保留在主页导航上，因为class=active。如何使其动态化，以便如果我在待办事项上，蓝色效果将出现在To-do导航栏上。

Answer 1

这应该有效

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