使用python / flask中的twitter引导CSS更改链接的活动类

一尘不染

使用python / flask中的twitter引导CSS更改链接的活动类

flask

我从页面中获取了以下html代码段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>

正如你在第2行看到的那样，该类处于活动状态。这将突出显示带有twitter bootstrap css文件的活动选项卡。现在，如果我要访问，则可以正常运行，www.page.com/但www.page.com/login例如当我访问时却不能。它仍将突出显示主页链接作为活动选项卡。

当然，我可以使用Javascript / jQuery轻松地做到这一点，但我宁愿在这种情况下也不使用它。

阅读 344

2020-04-06

共1个答案

一尘不染

通常，你想要一个带有活动导航项的导航栏。这确实很容易实现。由于子模板中块外部的分配是全局的，并且是在评估布局模板之前执行的，因此可以在子模板中定义活动菜单项：

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

然后可以访问布局模板active_page。另外，为该变量定义一个默认值也很有意义：

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

2020-04-06