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 %}
我不是很知道我是缺少在這裏。
請建議。