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

php jquery twitter-bootstrap

2022-08-30 12:23:24

将 Twitter Bootstrap 导航栏中的活动链接加粗的标准方法是什么？很明显，链接通过获得“活动”类来获得活动外观。例如，下面的链接处于活动状态。当我单击导航栏中的任何链接时，是否应该使用jQuery从元素中删除所有类，然后将该类添加到我已ID的链接中？Homeliactive

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

答案 1

您需要确保将活动类设置为请求响应的一部分（当页面加载时），而不是在用户单击链接以请求其他页面时设置之前。

首先，您需要确定应将哪个类设置为活动，然后将活动类添加到 .代码将如下所示navlink<li>

经提问者测试：

PHP 文件中的 HTML

在链接目标请求uri中传递的标记中内联调用php函数<li>

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

?>

答案 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');
});