BootStrap 4 не устанавливает активную страницу на панели навигации - PullRequest
Новая
       51

BootStrap 4 не устанавливает активную страницу на панели навигации

0 голосов
/ 29 января 2020

после поиска в вопросе и ответах я все еще не могу заставить NAVBAR добавить класс «активный» на текущей странице. 

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

Я вижу, что класс добавлен , и когда новая страница загружается, класс исчезает .. ?? я не могу этого понять jquery.

Обходное решение, которое я нашел, заключается в предоставлении переменной

<?php pageID = "index"; ?> на каждой странице и в соответствующей 'nav-link' классе

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

кстати, код заголовка находится в заголовке. php, который загружается на каждой странице include('header.php');

в поисках руководства по использованию jquery вместо работы вокруг

1 Ответ

0 голосов
/ 29 января 2020

Ваш обходной путь, на самом деле, является типичным способом достижения этого. 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');
  }
}
...