gpt4 book ai didi

php - 当导航是 PHP 包含时,Bootstrap 将事件类添加到导航栏

转载 作者:行者123 更新时间:2023-11-28 12:47:22 25 4
gpt4 key购买 nike

我目前正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com