码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-11-23 11:32:47      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

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

(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");
    }
})(jQuery, window, document)

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

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

标签:

原文地址:http://www.cnblogs.com/ylsq/p/4987569.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!