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

Question

我在 Wordpress 中创建了一个导航菜单，并将其放在我的子主题的 sidebar.php 中。

我的导航菜单位于正确的位置和功能，看起来应该是除了 JS，我试图正确但似乎失败了。

每个菜单项都会将您带到不同的页面。我希望菜单项保持突出显示，以显示您在链接到该页面后所在的页面。我已经使用 CSS 使用 :hover 突出显示 li。

我不知道如何或在何处放置 js 以使其突出显示菜单。

1. 我的 JS 正确吗？
2. 我应该把它放在哪里？直接在sidebar.php下的html？还是其他地方？

谢谢！

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

            });

.main-nav .main-nav-list li:hover {
 background-color: #323840;
 width: 150px;
 border-radius: 20px; 
}

.main-nav .main-nav-list li:active {
 background-color: #323840;
}

<div class="sidebar sidebar-main <?php echo $sidebar_classes; ?>">
        <div class="inner-content widgets-container">
                <?php generated_dynamic_sidebar($sidebar_name);?>
<div class="nav nav-pills nav-stacked main-nav">
<div class="main-nav-holder">
<ul class="main-nav-list">
<li class="active">
 <a id="sidebar-questions" href="/dwqa-questions">QUESTIONS</a>
</li>
<li class="">
 <a id="sidebar-ask" href="/dwqa-ask-question">ASK A QUESTION</a>
</li>
<li class="">
 <a id="sidebar-ama" href="/ask-me-anything">AMAs</a>
</li>
<li class="">
 <a id="sidebar-jobs" href="/jobs">JOBS</a>
</li>
<li class=“">
<a id="sidebar-find" href="/find-a-health-professional">FIND A HEALTH PRO</a>
</li>
</ul>
</li>

Answer 1

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

$('.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。 "

Answer 2

使用这个 javascript 函数。此函数将跟踪浏览器中的 url，并将“活动”类添加到链接中。

希望这对你有用。

祝你好运，编码愉快.. :)

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

Answer 3

1.您的 jQuery 点击处理程序绑定到不正确的“ul”标签，因为“this”的内部回调函数上下文由“ul”表示，而不是点击的 li。您的代码应如下所示：

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

2。如果您正在通过重新加载更改页面，您可以将导航栏状态存储在 sessionStorage 中或从路径中获取。

Answer 4

试试这个： Sample

HTML

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

CSS：

.menu-sample {
  list-style: none;
  padding: 5px;
}

.menu-item-sample:hover {
  background-color: red;
}

.menu-item-sample.active {
  background-color: blue;
}

JS：

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

我希望能在某些方面有所帮助