如何在使用ajax时更新导航栏

How to handle updating the navigation bar while using ajax

本文关键字：更新 导航 ajax      更新时间：2023-09-26

我在我的Wordpress安装上有一个AJAX实现，我使用'CSS和Javascript工具箱'插件来应用额外的Javascript代码。我还在header.php文件的section和.

中尝试了以下代码

我使用的是标准的"Twenty Fourteen"主题，我引用了顶部的主要导航栏。没有子页面，只有普通的链接。

http://twentyfourteendemo.wordpress.com/

我正在使用的代码，我确定这是问题所在，是这个

<script>
jQuery('ul.menu li').click(function(){   
// Remove class on each item  
jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
// Add class for this one    
jQuery(this).addClass('current_page_item current-menu-item'); 
})
</script>

我也试过这个

<script>
jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');
</script>

我不知道Javascript很好，但这不是做任何事情。当链接被点击时，导航栏上的"高亮显示"页面保持在原始页面上。

我有其他的代码，切换导航栏打开和关闭时，点击一个链接(在移动设备上)，这工作得很好，所以代码注册，只是不工作。

有人知道为什么这段代码不工作吗?我已经被这个问题困扰了好几天了，如果这个问题没有得到解决，我就无法启动，我甚至会给任何有解决方案的人一些啤酒钱

我不能在那个网站上看到你的示例代码，看看你的代码是否在正文或头部等，但你可以尝试几件事:

1 -你没有将你的代码包装在一个文档准备事件中

这意味着您可能在DOM元素存在之前对其运行代码，因此代码什么也不做。

这个jQuery(document).ready()的快捷版本还提供了一个局部作用域$变量，所以你可以缩短你的jQuery代码:

<script>
jQuery(function($){
    $('ul.menu li').click(function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

2 -如果菜单项在加载后被添加/分类(例如由插件)，你需要使用委托事件处理程序:

。

<script>
jQuery(function($){
    $(document).on('click', 'ul.menu li', function(){   
        // Remove class on each item  
        $('ul.menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

它的工作原理是监听事件冒气泡直到一个不变的祖先元素，然后应用一个jQuery元素选择器，然后将你的函数应用到任何导致事件的元素。

注意:委托事件的回退元素应该始终是document而不是'body'，因为'body'有一些错误(与样式相关)，可能导致事件不触发。然而，您应该将最近的不可更改祖先作为最有效的目标。

注意:第二个选项是通常是为一组控件编写事件处理程序的最佳方式，因为它只向DOM添加一个处理程序。

更新:

正如预测的那样，JS代码在头中，因此需要包装在一个文档就绪的事件处理程序中。

另外，实际网站使用的菜单是这样的:<ul id="menu-pages" class="nav-menu">，所以菜单项的选择器应该是ul.nav-menu li或#menu-pages li，而不是ul.menu li。

如

<script>
jQuery(function($){
    $(document).on('click', 'ul.nav-menu li', function(){   
        // Remove class on each item  
        $('ul.nav-menu li').removeClass('current-menu-item current_page_item');
        // Add class for this one    
        $(this).addClass('current_page_item current-menu-item'); 
    })
});
</script>

相关文章：