0
我想製作一個導航欄，以便當前活動的<li>標記以不同的背景顏色突出顯示。jQuery addClass/removeClass使用jinja模板加載頁面時
而一旦在導航欄上單擊了另一個選項，該<li>標記將立即突出顯示，而不是前一個。
在.css文件：
.active {
background-color: lightblue;
}
我.js代碼：
$(".topnav li").on('click', function() {
$(".topnav li").removeClass("active");
$(this).addClass("active");
});
頁面佈局，我已經創建了一個名爲 「comfylayout.html」 一jinja模板，
<title>
{% block title %} {% endblock %}
</title>
<body>
{% block body %} {% endblock %}
<ol class='topnav'>
<li><a href="{{url_for('decorators')}}">Decorators</a></li>
<li><a href='#'>Turtle</a></li>
<li><a href='#'>Tkinter</a></li>
<li><a href='#'>Python regex</a></li>
</ol>
</body>
最後3個工作正常<li>標籤，其中我沒有加載任何頁面，但是當我單擊第一個鏈接時，將添加active類，並在該頁面加載後立即快速刪除。
加載頁面有如下內容 -
{% extends "comfylayout.html" %}
{% block title %}
Decorators
{% endblock %}
{% block body %} ABC {% endblock %}
我不是很知道我是缺少在這裏。
請建議。