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

2024/11/19 18:20:12

I got the following html snippet from my 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 you can see on line 2, there's the class active. This highlights the active tab with the twitter bootstrap css file. Now, this will work fine if I would visit www.page.com/ but not when I would visit www.page.com/login for example. It would still highlight the home link as the active tab.

Of course, I could easily do this with Javascript/jQuery but I'd rather not use that in this situation.

There's already a working solution for ruby on rails but I don't know how to convert that into python/jinja (I'm rather new to jinja/flask, never worked with ruby at all)

Answer

Have you looked at this ? https://jinja.palletsprojects.com/en/3.0.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>
https://en.xdnf.cn/q/26367.html

Related Q&A

overwriting a spark output using pyspark

I am trying to overwrite a Spark dataframe using the following option in PySpark but I am not successfulspark_df.write.format(com.databricks.spark.csv).option("header", "true",mode=…

How to patch a constant in python

I have two different modules in my project. One is a config file which containsLOGGING_ACTIVATED = FalseThis constant is used in the second module (lets call it main) like the following:if LOGGING_ACTI…

Python script for minifying CSS? [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines. It is not currently accepting answers.We don’t allow questi…

Saving numpy array to txt file row wise

I have an numpy array of forma = [1,2,3]which I want to save to a .txt file such that the file looks like:1 2 3If I use numpy.savetxt then I get a file like:1 2 3There should be a easy solution to this…

I want Python argparse to throw an exception rather than usage

I dont think this is possible, but I want to handle exceptions from argparse myself.For example:import argparse parser = argparse.ArgumentParser() parser.add_argument(--foo, help=foo help, required=Tru…

Pass Variable from python (flask) to HTML in render template?

The web server works (python flask) but when I go to the website, where the value of animal should be (dog) it shows the variable name animal. (There is more to the code but this is the most simplistic…

How to clear console in sublime text editor

How to clear console in sublime text editor. I have searched on internet too..But cant find proper shortcut for that. Please provide info

YAML loads 5e-6 as string and not a number

When I load a number with e form a JSON dump with YAML, the number is loaded as a string and not a float.I think this simple example can explain my problem.import json import yamlIn [1]: import jsonIn …

How to get rid of grid lines when plotting with Seaborn + Pandas with secondary_y

Im plotting two data series with Pandas with seaborn imported. Ideally I would like the horizontal grid lines shared between both the left and the right y-axis, but Im under the impression that this is…

How to set the line width of error bar caps

How can the line width of the error bar caps in Matplotlib be changed?I tried the following code:(_, caplines, _) = matplotlib.pyplot.errorbar(data[distance], data[energy], yerr=data[energy sigma],cap…