如何在侧边栏中使用js单击后保持导航菜单高亮显示

我假设你没有使用任何路由器来保持在同一个页面上。如果是这样，那么一旦用户点击任何链接，浏览器将加载一个全新的页面，所以你的这段代码

$('.main-nav-list').on('click', function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

没有效果，因为它修改了上一页，而该页现在被新页所取代。我认为你可以在页面加载时做的一件事是阅读pathname并突出显示相应的链接。下面是如何做到这一点的一个例子

<script>
    jQuery(function () {
        var pathname = document.location.pathname;
        console.log('the pathname is: ', pathname);
        jQuery('.main-nav-list a').each(function () {
            var value = jQuery(this).attr('href');
            if (pathname.indexOf(value) > -1) {
                jQuery(this).closest('li').addClass('active');
                return false;
            }
        })
    });
</script>

并删除html中所有li元素的active类。

我使用jQuery而不是$，因为:

"当WordPress ' jQuery加载时，它使用兼容模式，其中是一种避免与其他语言库冲突的机制。

这归结起来就是你不能直接使用美元符号就像你在其他项目中做的那样。当你为WordPress编写jQuery时需要使用jQuery代替。"

使用这个javascript函数。这个函数将从浏览器跟踪url，并将"active"类添加到链接中。

祝你好运&编码快乐. .:)

<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/clients/">Clients</a></li>
        <li><a href="/contact/">Contact Us</a></li>
    </ul>
</nav>  
$(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

1。你的jQuery点击处理程序绑定到'ul'标签，这是不正确的，因为'this'的回调函数上下文是由'ul'而不是click li表示。您的代码应该看起来像:

$('.main-nav-list li').on('click', function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

2。如果你在重新加载页面时改变了页面，你可以将导航条状态存储在sessionStorage中，或者从path.

试试这个:示例

<ul class="menu-sample">
  <li class="menu-item-sample active"><a href="http://google.com">link 1 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 2 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 3 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 4 here</a></li>
  <li class="menu-item-sample"><a href="http://google.com">link 5 here</a></li>
</ul>

.menu-sample {
  list-style: none;
  padding: 5px;
}
.menu-item-sample:hover {
  background-color: red;
}
.menu-item-sample.active {
  background-color: blue;
}

$('.menu-item-sample').on('click', function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});