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

Popular posts from this blog

html - How to style widget with post count different than without post count -

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

javascript - storing input from prompt in array and displaying the array -