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

我从我的页面

template.html

中获得了以下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>

{%if会话['logged_in']%}



{%endif%}
{%如果不是会话['logged_in']%}


{%endif%}

正如你在第2行看到的，这个类是活动的。这将突出显示带有twitter引导css文件的活动选项卡。现在，如果我访问

www.page.com/

，这将很好，但当我访问

www.page.com/login

时就不行了。它仍然会突出显示主页链接作为活动选项卡

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

---

已经有了一个，但我不知道如何将其转换为python/jinja（我对jinja/flask比较陌生，从来没有使用过ruby）

你看过这个吗

突出显示活动菜单项 通常，您希望有一个带有活动导航项的导航栏。这真的很容易实现。由于子模板中块外的指定是全局的，并且在评估布局模板之前执行，因此可以在子模板中定义活动菜单项：

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

然后，布局模板可以访问

活动页面

。此外，为该变量定义默认值也是有意义的：

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

{%set导航条=[
（“/”、“索引”、“索引”），
（“/downloads/”、“downloads”、“downloads”），
（“/about/”、“about”、“about”）
] -%}
{%set active_page=active_page |默认（'index'）-%}
...

{%for href，id，导航栏中的标题%}

{%endfor%}

对于jinja/flask/bootstrap用户：

如果您像在博客示例中那样定义导航 只需将ID分配给与url#u参数匹配的链接，您只需修改布局模板，其余的就可以了

在基本/布局模板的底部添加以下内容

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

$（文档）.ready（函数（）{
$（“#{{request.endpoint}}”）.addClass（“active”）；}）

而正确的元素将被设置为激活状态

编辑： 如果布局中的元素位于列表中，如下所示：

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

使用parent（）函数获取li元素，而不是链接

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

$（文档）.ready（函数（）{
$（“#{{request.endpoint}}”）.parent（）.addClass（“active”）；}）

如果您的菜单分布在整个页面上，这里有另一种更简单的方法。这种方式使用内联if语句打印出类活动的

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

或

---

在页面的某个位置添加以下CSS：

a[href$={{page_name | default（'/'“| safe）}}]{[INSERT YOUR ACTIVE style HERE]}

现在，在每个模板上定义

page\u name

，例如：

{%extends“template.html”%}
{%set page_name=“gallery”%}

这似乎比其他选项更简单、更容易构建

编辑：

差不多一年后，我又回来做了一个简单得多的修复，因为在每个页面上设置页面名称是非常低效的

而是创建如下函数：

@app.context\u处理器
def context_处理器（）：
out={}
out['request']=request#确保从烧瓶导入请求
返回

这将允许您隐式地将变量传递给jinja，在本例中，我们将访问请求传递给

request.url\u rule

，其中包含用户正在访问的路由。在以前的版本中，我们只需将

{{page|name | default（'/'“| safe）}}

更改为

“{request.url|rule | safe}”

。更干净。

我喜欢的方法，但实际上没有理由要求在每个元素的id中复制端点

base.js：

base.html

为什么不把这个脚本内联呢？当然可以，但是允许内联JS是一种错误。您应该在您的站点上使用CSP（例如），它不允许内联JS。使用

data-*

属性，以安全的方式实现这一点并不困难

---

注意：如果您有多个指向同一当前页面的链接，并且您只希望其中一个链接被标记为“活动”，那么这种方法可能不适合您。

我不想在子页面中定义ID，因为我拥有的许多链接都没有特定的子模板

使用

request.base\u url

并如果它与路径的

\u external

url\u匹配，则将该导航项目呈现为活动状态

{%set导航项目=[
（“public.home”、“home”），
（“public.downloads”，“downloads”），
（“public.about”、“about”）
（“account.login”、“login”），
]
-%}
...

{%对于路由，在导航项目%中显示\u文本}


{%endfor%}


我们可以使用jinja if语句使类处于活动状态






这非常漂亮，尤其是在看到ruby代码之后，这就更有意义了。我甚至不知道jinja也能做到这一点，谢谢你的链接，我相信我现在能弄明白：）既然你已经控制了这些值，为什么要退出
href
和
标题
（例如
href | e
），这对我不起作用。我不知道它是如何得到当前页面名的，所以我
<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>

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

{% set active_page = "menu2" %}

$(document).ready(function () {
    var scriptElement = $('#baseScript')[0];
    var path = scriptElement.getAttribute('data-path');
    $('a[href="'+path+'"]').addClass("active");
});

<script id="baseScript" src="{{ url_for('static', filename='js/base.js') }}"
data-path="{{ request.path }}"></script>

<ul class="nav navbar-nav">
     <li class="{% if request.endpoint=='home' %}active{%endif %}"><a href="{{  url_for('home') }}">home</a></li>
     <li class="{% if request.endpoint=='add_client' %}active{%endif %}"><a href="{{  url_for('add_client') }}">Add Report</a></li>
    </li>
  </ul>