在菜单中添加活动 class

Question

我正在通过 jQuery 在 nav > ul >li 中添加 class="active" 以更改背景颜色。它在 href="#" 时工作。但是当我在 href="example.php" 之间添加 link - 它会转到页面。但是 active class 不工作，并且没有剩余背景来显示我在哪里。

是否可以 link 工作并更改背景以显示我现在所在的页面 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

是的，当您更改页面时有点棘手 - 您需要一种方法将点击的标识符发送到新页面。大多数时候我们可以使用一点 jQuery 来做到这一点。 （jQuery 将中断默认的 <a> 操作，创建一个 <form> 带有包含您要发送的信息的隐藏字段，然后 submit()表格)

但可能有更简单的方法...对于每个页面，只需使该页面的菜单项具有活动 class.

如果简单的方法不起作用，这个 SO 答案有一个应该适合你的演示：

How to pass data to another page using jquery ajax

Answer 2

您可以尝试检查页面 href 是否与您的 link 完全匹配，如果它不是 # link.

$(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>

在菜单中添加活动 class

Adding active class in menu

jquery

menu