激活 Twitter Bootstrap 导航栏链接

Posted 2023-02-24

【中文标题】激活 Twitter Bootstrap 导航栏链接

【英文标题】：Make Twitter Bootstrap navbar link active

【发布时间】：2012-08-02 13:14:08

【问题描述】：

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

【参考方案1】：

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

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

由提问者测试：

php 文件中的 HTML

在 <li> 标记中调用内联的 php 函数，传递链接目标请求 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 函数

简单的 php 函数需要比较传入的请求 uri，如果它匹配当前正在渲染的页面输出 active 类

<?php 

function echoActiveClassIfRequestMatches($requestUri)

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

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


?>

【讨论】：

感谢您的提示。我只是将if 放在一行中（Rails 代码）：<% if current_page?(controller: 'about') %><li class="active"><% else %><li><% end %><%= link_to "About", about_path %></li> 我使用else 只是为了使其更具可读性。

你可以使用 $_SERVER['PHP_SELF'] 而不是使用 $_SERVER['REQUEST_URI'] - 这样你就可以支持带有参数的 uri。

非常好的方法，我在不同状态的 switch 语句和每个 li 元素都有一个类似于函数的 if 语句之间纠结。绝对值得投票

【参考方案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');
);

【讨论】：

这是我找到的最干净的解决方案。我唯一要添加的是选择器中 之前导航栏的 id。它只是减少了 jquery 的搜索量，例如$('#main-navbar .nav a[href="' + this.location.pathname + '"]').parent().addClass('active');

【参考方案3】：

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

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

页面加载后。

【讨论】：

这是唯一一个专门使用 Bootstrap 和 JQuery 的正确答案。它也适用于dropdown nav 元素。诀窍似乎是.parents('li')。

实际上，.parents('li') 将标记每个包含活动类链接的 li。我会推荐.closest('li')，它会找到第一个是li的父母。

优雅的解决方案！谢谢。

【参考方案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;

【讨论】：

就像 Chris Moutray 之前提到的，这个脚本只会更新类然后重新加载页面，这会使更改丢失。

@Josephjun.Melettukunnel 我认为他想用 jQuery 来做这件事的目的是他没有重新加载页面。否则，他不想用 jQuery 来做这件事——只需用 HTML 或 PHP 更改活动的导航项。看起来他可能想通过 AJAX 加载内容或使用导航项作为选项卡。

她*她* - 对不起！

假设您重新加载整个页面，关于在服务器中打开正确导航栏选择的性能的任何想法（上例中的 php）。在客户端中执行此操作，我认为在浏览器中呈现页面和导航栏链接变为“活动”之间可能会有一个非常小的但有时会很明显的延迟......

【参考方案5】：

在页面底部添加以下脚本：

<script>
    $(document).ready(function() 
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    );
</script>

【参考方案6】：

Chris Moutray 您的回答对我的软件开发帮助很大（我正在使用 ZendFramework）。我写了这个视图助手：

<?php

class Zend_View_Helper_ActiveOrNot 

    function activeOrNot ( $requestUri )  

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

        if ($current_file_name == $requestUri)

            echo 'class="active"';

       

在这种情况下，我在视图中这样称呼这个助手：

<?php $this -> activeOrNot ( "public" );

谢谢你！！

【参考方案7】：

你可以用 CSS 解决它。

在每个页面的正文中添加一个类：

<body class="home">

或者，如果您在联系页面上：

<body class="contact">

然后在创建样式时考虑到这一点：

ul li:hover, body.home a.home, body.contact a.contact  background-color: #000;  
ul li:hover a, body.home li.home a, body.contact li.contact a  color: #fff; 

最后，将类名应用于列表项：

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

此时，每当您在 body.home 页面上时，您的 li.home 链接将具有默认样式，表明它是当前页面。

【参考方案8】：

如果您将 $pageTitle 分配给页面名称，则无需 javascript 即可完成此操作

<ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") echo 'class="active"'; ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>

【参考方案9】：

只需将以下代码放入“head”部分即可。

<script type="text/javascript">
$(document).ready(function () 
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
);
</script>

显然不要忘记您之前对 jquery.js 的调用。

还有你的：

<style>
.activesomething...
</style>