时间戳

首页 > 解决方案 > 使用 MDBootstrap 和 nav.php 更新导航栏上的活动类

javascript - 使用 MDBootstrap 和 nav.php 更新导航栏上的活动类

问题描述

我正在尝试使用 MDBootstrap 通过检查当前的 href 来更新我的导航栏上的活动类，以便它表示用户当前在哪个页面上。我可以在下面的代码中成功地将类设置为在单个列表项中处于活动状态，但是当我在浏览器上选择另一个导航栏选项时它不会更新。我已经尝试了在 Stackoverflow 上找到的所有 js 代码片段，但均无济于事。对于上下文，我所有的导航栏代码都在一个文件nav.php中，并且正在加载到所有其他文件中。

我如何将导航栏加载到每个完美运行的 php 文件中：

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

更新：我不再使用上面的代码加载nav.php，我只是<?php include_once "nav.php";?>在每个 PHP 文件的顶部使用。

导航.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>

我将不胜感激您可能需要提供的任何帮助，我确信我忽略了某些东西或不知道一些关键知识。谢谢！

标签： javascriptphphtmlcssmdbootstrap

解决方案

推荐阅读