基于jquery实现导航菜单高亮显示（两种方法）

下面是“基于jquery实现导航菜单高亮显示（两种方法）”的完整攻略：

1.概述

增加导航菜单的高亮显示可以帮助用户更加清晰地知道自己当前所处的页面，提高用户的使用体验。jquery是一个非常优秀、常用的Javascript库，本文将介绍两种使用jquery实现导航菜单高亮显示的方法。

2.两种方法

方法1：利用路由路径

在路由路径中，可以通过window.location获取当前页面的URL，进而判断当前页面对应的导航菜单项，从而设置高亮样式。

示例1：

$(function(){
    // 获取当前URL
    var currentUrl = window.location.href;
    // 遍历导航菜单项
    $("#nav li a").each(function(){
        // 判断当前URL是否与导航菜单项URL相同
        if(currentUrl.indexOf($(this).attr("href")) > -1){
            // 设置导航菜单项高亮显示
            $(this).parent().addClass("active");
        }
    });
});

说明：

以上代码中，首先获取当前页面的URL，然后遍历导航菜单项，判断当前页面所对应的导航菜单项，如果相同则添加“active”类名，从而设置高亮样式。

方法2：利用页面标题

在页面中，可以通过document.title获取当前页面的标题，进而判断当前页面对应的导航菜单项，从而设置高亮样式。

示例2：

$(function(){
    // 获取当前页面标题
    var currentTitle = document.title;
    // 遍历导航菜单项
    $("#nav li a").each(function(){
        // 判断当前页面是否与导航菜单项标题相同
        if($(this).attr("title") === currentTitle){
            // 设置导航菜单项高亮显示
            $(this).parent().addClass("active");
        }
    });
});

说明：

以上代码中，首先获取当前页面的标题，然后遍历导航菜单项，判断当前页面所对应的导航菜单项，如果标题相同则添加“active”类名，从而设置高亮样式。

3.总结

以上两种方法都可以实现导航菜单高亮显示，但是，方法1需要对每个页面设置相应的路由路径，比较麻烦；方法2相对简单，只需要对页面设置一个标题即可。在实际应用中可根据需求自行选择使用哪种方法来实现导航菜单高亮显示。