用python / flask中的twitter bootstrap css改变一个链接的活动类

问题描述

我从我的页面 template.html 中得到了以下html代码片段：

 < ul class ='nav'> 
< li class =active>< a href ='/'>主页< / a>< / li> 
< li>< a href ='/ lorem>> Lorem< / a>< / li> 
 $ b $ {％if session ['logged_in']％} 
< li>< a href =/ account>帐户< / a>< / li> 
< li>< a href =/ projects>项目< / a> 
< li>< a href =/ logout>注销< / a>< / li> 
 {％endif％} 
 
 {％if if not session ['logged_in']％} 
< li>< a href =/ login> Login< / A>< /锂> 
< li>< a href =/ register>注册< / a>< / li> 
 {％endif％} 
< / ul> 
  

正如您在第二行看到的那样，这个类是活跃的。这突出了与twitter引导程序的CSS文件的活动选项卡。现在，如果我访问 www.page.com / ，但是当我访问 www.page.com/login 。它仍然会突出主页链接作为活动选项卡。



当然，我可以很容易地使用JavaScript / jQuery做到这一点，但我宁愿不要在这种情况下使用。

已经有一个

突出显示活动菜单项目

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

  {％extendslayout.html％} 
 {％set active_page =index％} 
  

布局模板可以访问active_page。此外，定义该变量的默认值是有意义的：

  {％set navigation_bar = [
（'/' ，'index'，'Index'），
（'/ downloads /'，'downloads'，'Downloads'），
（'/ about /'，'about'，'About'）$ [b $ b]  - ％} 
 
 {％set active_page = active_page | default（'index'） - ％} 
 ... 
< ul id =navigation > 
 {％for href，id，navigation_bar％中的标题} 
< li {％if id == active_page％} class =active{％endif 
％}>< a href ={{href | e}}> {{caption | e}}< / a> 
< / li> 
 {％endfor％} 
< / ul> 
  

...

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)

解决方案

Have you looked at this ? http://jinja.pocoo.org/docs/tricks/

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

...

这篇关于用python / flask中的twitter bootstrap css改变一个链接的活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！