Question

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

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

每个菜单项都会将您带到另一个页面。我希望菜单项保持突出显示，以便在链接到该页面后显示您所在的页面。我使用CSS来突出显示li：hover。

我无法弄清楚如何放置js以保持菜单突出显示。

我的JS是否正确？
我在哪里放置它？直接在html下的sidebar.php？或其他地方？

谢谢！

$('.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中的所有active元素中删除li类。

由于这个原因，我使用了jQuery代替$：

＆＃34;当加载WordPress的jQuery时，它使用兼容模式，即   是一种避免与其他语言库冲突的机制。

这归结为你不能直接使用美元符号   就像你在其他项目中一样。为WordPress编写jQuery时   需要使用jQuery代替。＆＃34;

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点击处理程序被绑定到＆＃39; ul＆＃39;标签是不正确的，因为在回调函数的上下文中，这个＆＃39;表示由＆＃39; ul＆＃39;而不是点击李。您的代码应如下所示：

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

我希望以某种方式帮助

单击侧栏中的js后如何保持导航菜单突出显示

4 个答案: