BootStrap4 没有在Navbar上设置Active Page

Question

在搜索问题和回复后，我仍然无法让 NAVBAR 在当前页面上添加 class "active"。

$(document).ready(function () {
    $(".nav-link").on("click", function(){
        $(".nav-link").find(".active").removeClass("active");
        $(this).parent().addClass("active");
  });
});

我确实看到 class 添加了 并且当新页面加载时 class 消失了..??我无法理解这个 jquery。

我发现的解决方法是提供变量

<?php pageID = "index"; ?> 在每个页面和相应的 'nav-link' 一个 class

<?php echo(pageID=="index") ? "active" : "" ?>

顺便说一句，导航栏代码位于每个页面上加载的 header.php include('header.php');

寻找有关如何使用 jquery 而不是变通

的指南

Answer 1

实际上，您的解决方法是实现此目的的典型方法。 Javascript 不会保留它通过您的导航所做的更改。要在 JS 中实现你想做的事情，你可能想使用 localStorage

/* Sample code */
localStorage.setItem('activeMenu', 'blog');
$(function(){
  if (localStorage.getItem('activeMenu') === 'blog') {
    $('#blogNavLink').addClass('active');
  }
}

如果您想在 PHP 中执行此操作，您可能会使用 PHP 变量或包含选择器的隐藏输入并在 JS 中使用它。

$activeMenu = 'blog';
<input type="hidden" id="menuItem" value="<?= $activeMenu ?>">
$(function(){
  if ($('#menuItem').val() === 'blog') {
    $('#blogNavLink').addClass('active');
  }
}

BootStrap4 没有在Navbar上设置Active Page

BootStrap 4 does not set the Active Page on the Navbar

php

jquery

nav