如何解决使用MDBootstrap和nav.php
我试图通过检查当前href来使用MDBootstrap更新导航栏上的 active 类,以便它表示用户当前位于哪个页面。我可以在下面的代码的单个列表项中成功将类设置为 active ,但是当我在浏览器中选择另一个navbar选项时,该类不会更新。我已经尝试了在Stackoverflow上找到的所有js代码片段,但都无济于事。对于上下文,我所有的导航条代码都在一个文件 nav.php 中,并正在加载到所有其他文件中。
我如何将导航栏加载到每个php文件中,效果很好:
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.php");
});
</script>
更新:我不再使用上面的代码加载 nav.php ,我只是在每个PHP文件顶部使用<?php include_once "nav.php";?>
。
nav.php:
<!-- header.php includes all the relevant CDN links for MDBootStrap 4.19.1 -->
<?php include_once "header.php";?>
<!DOCTYPE html>
<html lang="en">
<nav class="mb-1 navbar navbar-expand-lg navbar-dark default-color" id="nav-placeholder">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-333"
aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-333">
<ul class="navbar-nav mr-auto" id="nav">
<li class="nav-item">
<a class="nav-link" href="/index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.php">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/apply.php">Apply Now</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact.php">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Make sure that upon execution of the js,'active' isn't being nullified -->
<script>
$(function(){
var current = location.pathname;
$('#nav li').each(function(){
var $this = $(this);
// if the current path is like this link,make it active
if($this.attr('href').indexOf(current) !== -1){
$this.addClass('active');
}
})
})
</script>
</html>
如果您能提供任何帮助,我将不胜感激,我相信我会忽略某些知识或不了解某些关键知识。谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。