javascript - 怎么保证在页面跳转后，导航栏点击后增加class

导航栏的menu比如有blog, user等，链接分别对应/blog, /user等，主页home上有个class="active",
问题是怎么实现在点击blog, user导航后，blog上有“active”属性。
各个页面是extends base.html的，所以希望写一个js放在base.html里
谢谢

# JavaScript

ringa_lee2208 天前425 次浏览

全部回复(1) 我要回复

ringa_lee2017-04-10 14:53:31

下面是Jinja2文档的一个技巧：

子页面模板：

jinja{% extends "layout.html" %}
{% set active_page = "index" %}

PS: 母模板可以读取active_page值。

layout.html部分代码：

jinja{% set navigation_bar = [
    ('//m.sbmmt.com/m/', '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

取消回复发送