如何根据 URL 动态突出显示活动菜单项？

根据页面 URL 动态突出显示活动菜单项

开发网站时的常见任务之一是突出显示当前活动的菜单项基于正在查看的页面的 URL。这增强了用户导航，并为用户在网站层次结构中的当前位置提供了视觉提示。

解决方案实现

JavaScript 通常用于动态实现此行为。然而，使用事件驱动方法（例如，单击菜单项）时会出现常见的陷阱，这些方法不能准确反映页面加载过程。

要有效地将“活动”类添加到适当的菜单项页面加载时，请考虑以下方法：

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

说明

在此代码中snippet:

• $(function(){...}) 确保页面完全加载后代码执行。
• var current = location.pathname; 检索当前 URL path.
• $('#nav li a').each(function(){...}) 迭代 #nav 元素中的所有菜单项（锚标记）。
• var $this = $(this); 存储当前菜单项processed.
• if($this.attr('href').indexOf(current) !== -1){...} 检查当前 URL 路径是否包含 href菜单项的属性，表明它是活动页面。
• $this.addClass('active'); 添加“active”类到适当的菜单项。

这种方法在页面加载时准确突出显示活动菜单项，确保一致且用户友好的导航体验。

以上是如何根据 URL 动态突出显示活动菜单项？的详细内容。更多信息请关注PHP中文网其他相关文章！