Javascript 使用MDBootstrap和nav.php更新Navbar上的活动类_Javascript_Php_Html_Css_Mdbootstrap

Javascript 使用MDBootstrap和nav.php更新Navbar上的活动类

javascript php html css

Javascript 使用MDBootstrap和nav.php更新Navbar上的活动类,javascript,php,html,css,mdbootstrap,Javascript,Php,Html,Css,Mdbootstrap,我正在尝试使用MDBootstrap更新导航栏上的活动类，方法是检查当前href，以便它指示用户当前所在的页面。我可以在下面代码中的单个列表项中将该类成功设置为活动，但当我在浏览器上选择其他导航栏选项时，该类不会更新。我已经尝试了在Stackoverflow上找到的所有js代码片段，但都没有用。在上下文中，我的所有导航条形码都在一个文件中，nav.php，并且正在加载到所有其他文件中我如何将导航栏加载到每个工作正常的php文件中： <div id="nav-placeholde

我正在尝试使用MDBootstrap更新导航栏上的活动类，方法是检查当前href，以便它指示用户当前所在的页面。我可以在下面代码中的单个列表项中将该类成功设置为活动，但当我在浏览器上选择其他导航栏选项时，该类不会更新。我已经尝试了在Stackoverflow上找到的所有js代码片段，但都没有用。在上下文中，我的所有导航条形码都在一个文件中，nav.php，并且正在加载到所有其他文件中

我如何将导航栏加载到每个工作正常的php文件中：

<div id="nav-placeholder">
</div>
<script>
    $(function(){
    $("#nav-placeholder").load("nav.php");
    });
</script>

<!-- 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>


$（函数（）{
$（“#导航占位符”）.load（“nav.php”）；
});

更新：我不再使用上面的代码加载nav.php，我只是在每个php文件的顶部使用

nav.php:

<div id="nav-placeholder">
</div>
<script>
    $(function(){
    $("#nav-placeholder").load("nav.php");
    });
</script>

<!-- 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>












$（函数（）{
var current=location.pathname；
$（'#nav li'）。每个（函数（）{
var$this=$（this）；
//如果当前路径与此链接类似，请将其激活
if（$this.attr（'href'）.indexOf（当前）！=-1）{
$this.addClass（'active'）；
}
})
})

如果您能提供任何帮助，我将不胜感激。我确信我忽略了一些东西，或者不知道一些重要的知识。谢谢大家!

$（function（）{}）

在加载初始DOM时执行，如果通过

.load（）

将其插入现有文档，我怀疑它是否会再次执行！我删除了

.load（）

代码块，而是使用

include\u once

将nav.php包含在每个php文件的顶部。我还尝试将脚本片段放入每个PHP文件中，而不仅仅是nav.PHP。然而，这仍然没有解决问题。