顶部导航高亮问题,即当前栏目页或者内容页的时候,菜单高亮,在首页时首页菜单高亮,效果见本站顶部。此代码适合各种 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"); } });