使Twitter Bootstrap导航栏链接处于活动状态

Question

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

Answer 1

您需要确保将活动类设置为请求响应的一部分(如页面加载),而不是在用户单击链接以请求其他页面之前.

首先,您需要确定哪个navlink应设置为活动,然后将活动类添加到<li>.代码看起来像这样

经问者测试:

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"';
}

?>

Answer 2

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

本教程为这个"问题"提供了一个很好的终极解决方案.我不久前正在处理它并为我工作,也可以自定义

$(document).ready(function() {
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active');
});

Answer 3

如果您不想处理服务器端,并且在所有href都很简单的情况下,例如'/page.php',您可以调用

$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

页面加载后.

Answer 4

你可以试试:

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

尽管如此,最好给出nav一个id属性,因为您可能在具有nav该类的页面上有多个导航.

$('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

或者,.css('font-weight', 'bold')您可以将其放在样式表中,而不是使用它:

.active {
    font-weight: bold;
}