Question

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

在每个页面上，使用php include调用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 attr。

命名

这适用于template.php的副本，但它不适用于index.php，这让我觉得它与旋转木马有关...

我也尝试过在某处使用data-toggle =“pill”，但这不起作用。

任何帮助将不胜感激。我现在在本地vps，但是我可以为它分配一个公共IP。

提前致谢！灰

Answer 1

由于脚本在加载导航栏之前包含在head.php中，因此没有任何内容可以应用“活动”类。也许将JavaScript放在导航栏后的单独包含中。

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

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

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

1 个答案: