我从页面中获取了以下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/