zoukankan      html  css  js  c++  java
  • 在项目中运用到的导航高亮

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

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


     

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

    (欢迎转载,请标明原地址)
  • 相关阅读:
    管道/重定向/环境变量
    用户和组命令
    常用命令
    系统监控及进程
    Centos硬件信息
    Centos系统信息及日志
    linux防火墙
    ipt_connlimit限制并发,ipt_recent限制单位时间内的请求数目
    apache添加mod_limitipconn限制单个ip并发连接数
    php核心技术与最佳实践知识点(下)
  • 原文地址:https://www.cnblogs.com/ylsq/p/4987569.html
Copyright © 2011-2022 走看看