在项目中运用到的导航高亮

不废话,直接贴代码,毕竟是简单的导航高亮,几乎所有人都能看懂

(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)


 

 如果作为新入门的同志有一些看不懂的属性,可以自行百度

(欢迎转载,请标明原地址)
posted @ 2015-11-23 10:08  叶落深秋  阅读(247)  评论(0编辑  收藏  举报