在Twitter
Bootstrap导航栏中以粗体显示活动链接的标准方法是什么?显然,链接通过获得“活动”类而获得活动外观。例如,Home
下面的链接是活动的。当我单击导航栏中的任何链接时,是否应该使用jQuery从li
元素中删除所有类,然后将该active
类添加到我已确定的链接中?
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
编辑 :我包括
<script type="text/javascript">
$('.nav li a').on('click', function() {
alert('clicked');
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
链接之后。当我单击链接时出现警报,但是“活动”类未添加到链接中。
这是我所有的导航栏HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">AuctionBase</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="home.php">Search</a></li>
<li><a href="about.php">About</a></li>
</ul>
</div>
</div>
</div>
</div>
您需要确保将 活动 类设置为请求响应的一部分(在页面加载时),而不是在用户单击链接以请求其他页面时设置。
首先,您需要确定navlink
应将哪些设置为活动类,然后将 活动 类添加到中<li>
。代码看起来像这样
经asker测试 :
php文件中的HTML
在<li>
传递链接目标请求uri 的标记内调用php函数内联
<ul class="nav">
<li <?=echoActiveClassIfRequestMatches("home")?>>
<a href="home.php">Search</a></li>
<li <?=echoActiveClassIfRequestMatches("about")?>>
<a href="about.php">About</a></li>
</ul>
PHP功能
简单的php函数需要比较传入的请求uri,如果与当前呈现的页面匹配,则输出 活动 类
<?php
function echoActiveClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="active"';
}
?>
我试图简单地在 元素周围放置一个边框,但是Bootstrap navbar 元素的边框向上到navbar的顶部和底部,这与图片中的情况不同。以下是我努力的样子: 我尝试使用的CSS只是一个简单的边框: 我尝试在链接周围设置边距,但这会使链接与其他链接脱节。我还尝试将SIGN UP按钮包装在div中,但这会使它失去很多引导属性。 有没有什么简单的方法,让我把这个边框周围的注册链接,而不必对抗引导?
导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展,而且,在折叠板插件的帮助下,它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默
导航栏是一个固定区域 (在固定和穿透布局类型中) 。它位于屏幕顶部,包含页面标题和导航元素。 导航栏包含3个部分:左、中、右。每个部分都可以包含任意的HTML内容,但推荐按照如下方式使用: 左部 用来放置返回链接、图标以及单独的文字链接。 中部 用来显示页面标题和标签链接(即按钮控制)。 右部 和左部一样。 导航栏布局 导航栏布局相当简单,根据字面意思即可理解: <div class="navba
navigation-bar 属性 类型 默认值 必填 说明 最低版本 title string 否 导航条标题 2.5.1 loading boolean false 否 是否在导航条显示 loading 加载提示 2.5.1 front-color string 否 导航条前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000 2.5.1 background-c
简易的导航栏 Simple navbar Jquery Mobile 提供了一个基本的导航栏组件,每一行可以最多放5个按钮,通常在顶部或者底部 导航栏的代码为一个ul列表,被一个容器包裹,这个容器需要有data-role="navbar"属性。要设定某一个链接为活动(selected)状态,给链接增加class="ui-btn-active" 即可。我们给尾部栏设置了一个导航栏,把one项设置为活
我需要将导航栏链接更改为白色,并在导航栏上留出空间。我已经为此编写了代码,但我似乎不明白为什么/在哪里它一直被覆盖。导航栏的背景是一个图像,链接似乎变为白色,而图像不在其中,那么有没有办法修复这个问题并将图像保留在背景中? 有人能帮我理解我做错了什么吗?