Добавление активного класса в меню

Question

Я добавляю class = "active" в nav> ul> li с помощью jQuery для изменения цвета фона.Работает, когда href = "#".Но когда я добавляю ссылку между href = "example.php" - она ​​переходит на страницу.но активный класс не работает, и фон не остается, чтобы показать, где я нахожусь.

возможно ли работа с ссылками, а также изменение фона, чтобы показать, какая страница у меня сейчас есть в jQuery или как они работают в WP?

$(document).ready(function(){
$(".menu").on('click','li', function(){
    $(".menu .active").removeClass('active');
    $(this).addClass('active');

} );

});

<ul class="menu">
    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="bestdeal.php">Best Deal</a></li>
    <li><a href="#">Shop</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

Answer 1

Вы можете попробовать проверить, соответствует ли страница href вашей ссылке точно, если это не ссылка #.

$(document).ready(function(){
  var $links = $('.menu li a');
  
  $links.closest('.active').removeClass('active');
  
  $links.filter(function(){
    return this.href === window.location.href;
  }).closest('li').addClass('active');
});

.active a { color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
    <li class="active"><a href="index.php">Home</a></li>
    <li><a href="/js">My Amazing Code Snippet on Stack Overflow</a></li>
    <li><a href="#">Shop</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">Sub menu</a></li>
            <li><a href="#">Sub menu</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

Answer 2

Да, это немного сложно, когда вы меняете страницы - вам нужен способ отправить кликнувший идентификатор на новую страницу.В большинстве случаев мы можем использовать немного jQuery для этого. (jQuery прервет действие по умолчанию <a>, создаст <form> со скрытым полем, содержащим информацию, которую вы хотите отправить, а затем submit() форму)

Но может быть и более простой способ ... Для каждой страницы просто сделайте так, чтобы пункт меню НА этой странице имел активный класс.

Если простой способ этого не делаетработайте, у этого ответа SO есть демо, которое должно работать для вас:

Как передать данные на другую страницу, используя jquery ajax