导航菜单高亮的一种js方法

2024-03-31 87

顶部导航高亮问题,即当前栏目页或者内容页的时候,菜单高亮,在首页时首页菜单高亮,效果见本站顶部。此代码适合各种 cms,并且不用改模板。

实现方法是根据面包屑导航匹配是否是当前页面,具体代码如下(页面上要先引入jquery.js)

$(function() {  
    var surl = location.href,  
        surl2 = $(".breadcrumb a:eq(0)").attr("href"),  
        surl3 = $(".breadcrumb a:eq(1)").attr("href");  
    var foundMatch = false; // 添加一个变量来跟踪是否找到匹配项  
  
    // 为每个.navbar>li>a元素添加mouseenter和mouseleave事件  
    $(".navbar>li>a").on({  
        mouseenter: function() {  
            // 当鼠标进入时,移除所有li上的current1类  
            $(".navbar>li").removeClass("current1");  
              
            // 检查当前元素的href属性是否匹配surl、surl2或surl3  
            var href = $(this).attr("href");  
            if (href == surl || href == surl2 || href == surl3) {  
                // 如果匹配,则给当前元素的父元素添加current1类  
                $(this).parent().addClass("current1");  
                foundMatch = true;  
            }  
        },  
        mouseleave: function() {  
			$(".navbar>li>a").each(function() {  
				var href = $(this).attr("href");  
				if (href == surl || href == surl2 || href == surl3) {  
					$(this).parent().addClass("current1");  
					foundMatch = true;  
					return false; // 跳出循环,因为已经找到了匹配的项  
				}  
			});  
            if (!foundMatch) {  
                $(".navbar>li:first").addClass("current1");  
            }  
        }  
    });  
  
    // 页面加载时检查初始状态  
    $(".navbar>li>a").each(function() {  
        var href = $(this).attr("href");  
        if (href == surl || href == surl2 || href == surl3) {  
            $(this).parent().addClass("current1");  
            foundMatch = true;  
            return false; // 跳出循环,因为已经找到了匹配的项  
        }  
    });  
      
    // 如果没有找到匹配的li,则给.navbar下的第一个li加上current1  
    if (!foundMatch) {  
        $(".navbar>li:first").addClass("current1");  
    }  
});