Changing the active class of a link with the twitter bootstrap css in python/flask -
i got following html snippet page template.html
.
<ul class='nav'> <li class="active"><a href='/'>home</a></li> <li><a href='/lorem'>lorem</a></li> {% if session['logged_in'] %} <li><a href="/account">account</a></li> <li><a href="/projects">projects</a> <li><a href="/logout">logout</a></li> {% endif %} {% if not session['logged_in'] %} <li><a href="/login">login</a></li> <li><a href="/register">register</a></li> {% endif %} </ul>
as can see on line 2, there's class active. highlights active tab twitter bootstrap css file. now, work fine if visit www.page.com/
not when visit www.page.com/login
example. still highlight home link active tab.
of course, javascript/jquery i'd rather not use in situation.
there's working solution ruby on rails don't know how convert python/jinja (i'm rather new jinja/flask, never worked ruby @ all)
have looked @ ? http://jinja.pocoo.org/docs/tricks/
highlighting active menu items
often want have navigation bar active navigation item. simple achieve. because assignments outside of blocks in child templates global , executed before layout template evaluated it’s possible define active menu item in child template:
{% extends "layout.html" %} {% set active_page = "index" %}
the layout template can access active_page. additionally makes sense defined default variable:
{% set navigation_bar = [ ('/', 'index', 'index'), ('/downloads/', 'downloads', 'downloads'), ('/about/', 'about', 'about') ] -%} {% set active_page = active_page|default('index') -%} ... <ul id="navigation"> {% href, id, caption in navigation_bar %} <li{% if id == active_page %} class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a> </li> {% endfor %} </ul>
...
Comments
Post a Comment