Changing the active class of a link with the twitter bootstrap css in python/flask

Have you looked at this ? https://jinja.palletsprojects.com/en/2.11.x/tricks/#highlighting-active-menu-items

Highlighting Active Menu Items

Often you want to have a navigation bar with an active navigation item. This is really simple to achieve. Because assignments outside of blocks in child templates are global and executed before the layout template is evaluated it’s possible to define the active menu item in the child template:

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

The layout template can then access active_page. Additionally it makes sense to define a default for that variable:

{% 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>

Here is another simpler way if you have menus distributed all over the page. This way uses inline if statements to print out the class active.

<ul><li class="{{ 'active' if active_page == 'menu1' else '' }}"><a href="/blah1">Link 1</a></li><li class="{{ 'active' if active_page == 'menu2' else '' }}"><a href="/blah2"> Link 2 </a></li></ul>

Class active is for highlighting

You still need to set the variable on every page to mark them

{% extends "master.html" %}{% set active_page = "menu1" %}

or

{% set active_page = "menu2" %}

For jinja/flask/bootstrap users:

If you define your nav like they did in the blog example http://getbootstrap.com/examples/blog/simply assign ids to your links that match your url_for arguments and you just need to modify the layout-template, the rest just works #magic.

<nav class="blog-nav">  <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>  <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>  <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a></nav>

At the bottom of your base/layout template just add this

<script>  $(document).ready(function () {  $("#{{request.endpoint}}").addClass("active"); })</script>

and the right elements will be set active.

EDIT:If you have a layout with elements in a list, like this:

<nav class="blog-nav">  <ul class="nav navbar-nav">    <li>        <a id="allposts"  class="blog-nav-item" href="{{ url_for('allposts')}}">All Posts</a>    </li>    <li>        <a id="index"     class="blog-nav-item" href="{{ url_for('index')}}">Index</a>    </li>    <li>        <a id="favorites" class="blog-nav-item" href="{{ url_for('favorites')}}">Favorites</a>    </li>  </ul></nav>

use the parent() function to get the li element instead of the link.

<script>    $(document).ready(function () {    $("#{{request.endpoint}}").parent().addClass("active"); })</script>