使 Twitter Bootstrap 导航栏链接处于活动状态 [英] Make Twitter Bootstrap navbar link active

问题描述

将 Twitter Bootstrap 导航栏中的活动链接设为粗体的标准方法是什么?很明显，链接通过获得活跃"类来获得活跃的外观.例如，下面的 Home 链接处于活动状态.当我单击导航栏中的任何链接时，是否应该使用 jQuery 从 li 元素中删除所有类，然后将 active 类添加到我已识别的链接中?

<li class="active"><a href="#">首页</a></li><li><a href="#">链接 2</a></li><li><a href="#">链接 3</a></li>

编辑:我包括了

在链接之后.单击链接时会出现警报，但活动"类未添加到链接中.

这是我所有的导航栏 HTML:

<div class="navbar-inner"><div class="容器"><a class="brand" href="#">AuctionBase</a><div class="nav-collapse"><ul class="nav"><li><a href="home.php">搜索</a></li><li><a href="about.php">关于</a></li>

解决方案

您需要确保将 active 类设置为请求响应的一部分(在页面加载时)，而不是在 ie 之前当用户点击链接请求不同的页面时.

首先您需要确定应该将哪个 navlink 设置为活动，然后将 active 类添加到

.代码看起来像这样

由提问者测试:

php 文件中的 HTML

在传递链接目标请求 uri 的

标记中内联调用 php 函数

<li <?=echoActiveClassIfRequestMatches("home")?>><a href="home.php">搜索</a></li><li <?=echoActiveClassIfRequestMatches("about")?>><a href="about.php">关于</a></li>

PHP 函数

php 函数 simple 需要比较传入的请求 uri 是否匹配当前正在渲染的页面输出 active 类

What's the standard way to make the active link in a Twitter Bootstrap navbar bolded? It's clear that a link gains the active appearance by gaining the "active" class. For example, the Home link below is active. When I click any link in the navbar, should a use jQuery to remove all classes from li elements and then add the active class to the link I've id'd?

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

EDIT: I included

<script type="text/javascript">
$('.nav li a').on('click', function() {
    alert('clicked');
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});
</script>

after the links. The alert appears when I click a link, but the "active" class is not added to the link.

Here's all of my navbar 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>

解决方案

You need to ensure that you set the active class as part of the request response (as the page loads) and not before ie when the user clicks a link to request a different page.

First you need to determine which navlink should be set as active and then add the active class to the <li>. The code would look something like this

Tested by asker:

HTML within php file

Call a php function inline within the <li> markup passing in the links destination request uri

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

The php function simple needs to compare the passed in request uri and if it matches the current page being rendered output active class

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>

这篇关于使 Twitter Bootstrap 导航栏链接处于活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！