不废话,直接贴代码,毕竟是简单的导航高亮,几乎所有人都能看懂
(function($, w, d) { function nav(name, className) { var url = window.location.pathname + window.location.search; //获取URL路径地址与URL Get传参之后的地址 var v1 = ""; if (url.indexOf("About/media") != -1) {//判断URL中是否存在about/media,主要用于判断media列表下的分页 $("li").removeClass(className);//首先删除传递过来的Class $(".nav-li").eq(5).addClass(className).find("ul li").eq(1).addClass(className);//给予已知li静态增加类名 } $(name).each(function() {//循环传递过来的元素 v1 = "" + $(this).attr("href");//此处原先写法为 v1 = "/"+$(this).attr("href");用于判断动态URL if (v1 == url) {//如果传递过来的元素的href与接收的url对等则进行以下判断 var v2 = $(this).parent().addClass(className);//将元素的父级元素li赋值传递过来的Class,并且保存[该元素为a] if ($(this).parent().parent()) {//判断该元素的其上一级导航是否存在 var v2 = $(this).parent().parent().parent().addClass(className);//如果存在则给予其一级导航元素增加Class } } }) } window.onload = function() { //内部传值 nav(".nav-body li a", "selected"); }
//以下为提升后的代码: function nav(name, className, urlFilter ) { var url = window.location.pathname + window.location.search; var v1 = ""; //alert(url); $(name).each(function() { v1 = urlFilter + $(this).attr("href"); if (v1 == url) { $(this).addClass(className); } }) } window.onload = function() { nav(".about-side-menu a", "about-cur", "/1688/about/"); } //就不写注释了,自己读出来的逻辑,才能更好的提升自己!代码可以根据个人喜好修改
})(jQuery, window, document)
如果作为新入门的同志有一些看不懂的属性,可以自行百度
(欢迎转载,请标明原地址)