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

Question

我从我的页面获得了以下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轻松完成此操作,但在这种情况下我宁愿不使用它.

已经有一个工作解决方案为ruby on rails但我不知道如何将其转换为python/jinja(我对jinja/flask很新,从来没有使用ruby)

Answer 1

你看过这个吗？http://jinja.pocoo.org/docs/tricks/

突出显示活动菜单项

通常,您希望拥有一个带有活动导航项的导航栏.这很容易实现.因为子模板中块之外的赋值是全局的并且在评估布局模板之前执行,所以可以在子模板中定义活动菜单项:

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

...

Answer 2

如果菜单遍布页面，这是另一种简单的方法。这种方法使用内联的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>

活动班是突出显示

您仍然需要在每个页面上设置变量以对其进行标记

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

要么

{% set active_page = "menu2" %}

Answer 3

对于jinja/flask/bootstrap用户：

如果您像在博客示例http://getbootstrap.com/examples/blog/ 中那样定义您的导航， 只需将 id 分配给与您的url_for参数匹配的链接，您只需要修改布局模板，其余的就可以了＃魔法。

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

在您的基本/布局模板的底部添加这个

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

并且正确的元素将被设置为活动状态。

编辑： 如果您的布局包含列表中的元素，如下所示：

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