怎么保证在页面跳转后,导航栏点击后增加class
导航栏的menu比如有
blog, user
等,链接分别对应
/blog, /user
等,主页home上有个
class="active"
,
问题是怎么实现在点击
blog, user
导航后,
blog
上有
“active”
属性。
各个页面是extends base.html的,所以希望写一个js放在base.html里
谢谢
鈴仙優曇華院
9 years, 11 months ago
Answers
下面是Jinja2文档的一个技巧:
子页面模板:
jinja
{% extends "layout.html" %} {% set active_page = "index" %}
PS: 母模板可以读取
active_page
值。
layout.html
部分代码:
jinja
{% set navigation_bar = [ ('/', 'index', 'Index'), ('/downloads/', 'downloads', 'Downloads'), ('/about/', 'about', 'About') ] -%} {% set active_page = active_page|default('index') -%} ... <ul id="navigation"> {% for href, id, caption in navigation_bar %} <li{% if id == active_page %} class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a></li> {% endfor %} </ul> ...
参考: http://99xueli.net/doc/jinja-docs/tricks.html#highlighting-active-menu-items
Sansan尼
answered 9 years, 11 months ago