我目前正在使用 bootstrap 构建一个站点，我想知道是否可以，以及如何将 class="active"属性添加到导航菜单上的链接。我在这个网站上看到了另一个与此类似的帖子，但是它在使用 Bootstrap 轮播的页面上不起作用。我删除了页面上所有指向 jQuery 和其他 javascript 的链接，但它仍然无法正常工作。
在每个页面上，nav 都使用 php include 调用，链接状态的代码也是如此。所以像这样想象标记:
<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 上，但是我可以为它分配一个公共(public) IP。
提前致谢! 灰
最佳答案
因为脚本在加载导航栏之前被包含在 head.php 中，所以它没有任何东西可以应用 'active' 类。也许将 JavaScript 放在导航栏之后的单独包含中。
如果这不起作用，我使用此脚本将事件类应用于特定菜单项，只需将其放在导航栏包含之后并将 href 更改为所需的“事件”按钮
<script>
$(document).ready(function(){
$('a[href^="home.html"]').addClass('active');
});
</script>
关于php - 当导航是 PHP 包含时，Bootstrap 将事件类添加到导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24754915/