当 nav 是 PHP 包含时，Bootstrap 将活动类添加到导航栏答案

【问题标题】：Bootstrap add active class to nav bar when nav is a PHP include当 nav 是 PHP 包含时，Bootstrap 将活动类添加到导航栏
【发布时间】：2014-09-05 10:54:34
【问题描述】：

我目前正在使用引导程序构建一个站点，并且想知道是否可以，以及如何将 class="active" 属性添加到导航菜单上的链接。我在这个网站上看到了另一个类似的帖子，但是它在使用 Bootstrap 轮播的页面上不起作用。我删除了页面上所有指向 jQuery 和其他 javascript 的链接，但它仍然无法正常工作。

在每个页面上，使用 php 包含调用 nav，链接状态的代码也是如此。所以像这样描绘标记：

<head>
<?php include_once('head.php'); ?>
</head>
<body>
<?php include_once('nav.php'); ?>
</body>

head.php 中的代码是我从本站另一篇文章中得到的：

<script>
/*menu handler*/
$(function(){
  function stripTrailingSlash(str) {
    if(str.substr(-1) == '/') {
      return str.substr(0, str.length - 1);
    }
    return str;
  }

  var url = window.location.pathname;  
  var activePage = stripTrailingSlash(url);

  $('.nav li a').each(function(){  
    var currentPage = stripTrailingSlash($(this).attr('href'));

    if (activePage == currentPage) {
      $(this).parent().addClass('active'); 
    } 
  });
});
</script>

在 nav.php 中我有：

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.php"><img src="assets/img/logo.png" /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/template.php">About</a></li>
                    <li><a href="/index-template.php">Services</a></li>
                    <li><a href="/index.php">Home</a> </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

每个页面都根据 href 属性命名。

这适用于 template.php 的副本，但它不适用于 index.php，这让我觉得这与轮播有关...

我也尝试过在某处推荐使用 data-toggle="pill" 但这不起作用。

我们将不胜感激。我目前在本地 vps 上，但是我可以为其分配一个公共 IP。

提前致谢！灰

【问题讨论】：

标签： php html css twitter-bootstrap

【解决方案1】：

因为在加载导航栏之前脚本已包含在 head.php 中，所以它没有任何东西可以应用“活动”类。也许将 JavaScript 放在导航栏之后的单独包含中。

如果这不起作用，我使用此脚本将活动类应用于特定菜单项，只需将其放在导航栏包含之后并将 href 更改为所需的“活动”按钮

<script>
$(document).ready(function(){
    $('a[href^="home.html"]').addClass('active');
});
</script>

【讨论】：