BootStrap 4 未在导航栏上设置活动页面

Question

在搜索问题和回复后，我仍然无法让 NAVBAR 在当前页面上添加“活动”类。

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

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

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

<?php pageID = "index"; ?> 在每个页面和各自的“导航链接”类中

<?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');
  }
}