在侧边栏中使用js单击后如何保持导航菜单突出显示 [英] How to keep nav menu highlighted after click using js in sidebar
问题描述
我已经在Wordpress中创建了一个导航菜单，并将其放置在子主题的sidebar.php中.
I have created a nav menu in Wordpress and placed it in sidebar.php in my child theme.
我的导航菜单在正确的位置和功能中，并且看起来应该与JS一样，但JS除外，我试图弄清楚但似乎失败了.
My nav menu is in the correct location and functions and looks as it should with the exception of the JS, which I have tried to get right but seem to be failing.
每个菜单项将您带到另一个页面.我希望菜单项保持突出显示，以便在链接到该页面后显示您所在的页面.我使用CSS突出显示了li :: hover.
Each menu item takes you to a different page. I want the menu item to stay highlighted to show which page you are on once you have linked to that page. I have used CSS to highlight the li using :hover.
我无法确定如何或在何处放置js以使其突出显示菜单.
I cant work out how or where to place the js to keep it the menu highlighted.
- 我的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>
推荐答案
我假定您不使用任何路由器将其保留在同一页面上.如果是这样，那么一旦用户单击任何链接，浏览器就会加载全新的页面，因此您的代码
I assume that you don't use any router to remain on the same page. If so, then once a user clicks on any link, a browser will load completely new page and so this code of yours
$('.main-nav-list').on('click', function () {
$('li.active').removeClass('active');
$(this).addClass('active');
});
没有任何作用，因为它修改了以前的页面，现在已被新页面替换.我认为您可以在页面加载时执行的一件事是阅读pathname并突出显示相应的链接.这是一个如何完成此操作的示例
has no effect, because it modified the previous page that is now replaced by the new page. The one thing I think you can do on page load is to read pathname and highlight a corresponding link. Here is an example of how this can be done
<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类.
And remove active class from all li elements in html.
由于以下原因，我使用了jQuery而不是$:
I used jQuery instead of $ because of this:
当加载WordPress的jQuery时，它使用兼容模式，该模式 是一种避免与其他语言库冲突的机制.
"When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.
这归结为您不能直接使用美元符号 就像在其他项目中一样.当为WordPress编写jQuery时 需要使用jQuery代替. "
What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. "
这篇关于在侧边栏中使用js单击后如何保持导航菜单突出显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
