当前位置: 首页 > 面试题库 >

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

暨高洁
2023-03-14
问题内容

我从页面中获取了以下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轻松地做到这一点,但我宁愿在这种情况下也不使用它。


问题答案:

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

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


 类似资料:
  • 我正在使用joomla 3和bootstrap.min.js创建菜单并给出特殊的类,以便改变悬停、活动、访问的链接和菜单的样式。我找不到如何改变菜单的活动链接颜色。假设我有两份菜单。家和联系人。当我在家里的时候,它是红色的,我想改变这个颜色。我可以更改a:active和a:hover。这里是代码; 甚至我用div来改变活动链接的颜色。这是代码 每次当我点击主页时,它就会被激活,颜色是红色的。我想把

  • 我试图改变颜色和背景颜色的活动链接在一个引导的下拉框。 我已经覆盖了bootstrap的@dropdownLinkColorActive和@dropdownLinkBackgroundActive变量,但这没有效果。 “.navbar inverse.nav.active”的css 为什么. navbar-inverse类重写. dropdown菜单类?

  • 问题内容: 在Twitter Bootstrap导航栏中以粗体显示活动链接的标准方法是什么?显然,链接通过获得“活动”类而获得活动外观。例如,下面的链接是活动的。当我单击导航栏中的任何链接时,是否应该使用jQuery从元素中删除所有类,然后将该类添加到我已确定的链接中? 编辑 :我包括 链接之后。当我单击链接时出现警报,但是“活动”类未添加到链接中。 这是我所有的导航栏HTML: 问题答案: 您需

  • 我正在使用bootstrap制作一个带有bootstrap的网站,这时我遇到了一个小问题。我试图改变我的导航栏(药丸)中文本的颜色: HTML: CSS: (这段代码解决了我的问题,但我有以下几个问题。) 我想知道为什么在CSS中我必须引用。nav类(为什么不只是.nav),以及为什么我必须引用a(链接标记)才能更改文本的颜色。(当我尝试将a(链接标记)更改为li(列表标记)时,文本的颜色没有更改

  • 本文向大家介绍twitter-bootstrap 保持当前导航链接为“活动”,包括了twitter-bootstrap 保持当前导航链接为“活动”的使用技巧和注意事项,需要的朋友参考一下 示例            

  • 第一个例子不起作用。我需要始终有一个列表来禁用链接?或者我的第一个演示有什么问题? https://jsfiddle.net/7y0u2amy/