激活Twitter Bootstrap导航栏链接

一尘不染

激活Twitter Bootstrap导航栏链接

php

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

阅读 246

2020-05-29

共1个答案

一尘不染

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

首先，您需要确定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"';
}

?>

2020-05-29