Javascript 将活动类置于引导中的活动导航栏上

我有这样一个导航栏：

  <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

nav栏上

这应该行得通

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

---

它确实可以工作，但是当页面完全加载时，它会立即变为默认的

主页。。。到底是什么问题？您想要实现什么？
$（document）.ready（函数（）{$（'a[href=“”+this.location.pathname+'”）.parent（）.addClass（'active'）；}）这成功了！