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)


     

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

    (欢迎转载,请标明原地址)
  • 相关阅读:
    Python PyQt5 Pycharm 环境搭建及配置
    Python Appium 元素定位方法简单介绍
    unittest单元测试简单介绍
    什么是multipart/form-data请求
    new HttpClient().PostAsync封装参数
    httpPostedFile实现WEBAPI文件上传
    Asp.Net WebApi接口返回值IHttpActionResult
    Asp.Net WebApi上传图片
    如果项目在IIS发布后,出现System.ComponentModel.Win32Exception: 拒绝访问。
    C# ASP.NET 控制windows服务的 开启和关闭 以及重启
  • 原文地址:https://www.cnblogs.com/ylsq/p/4987569.html
Copyright © 2011-2022 走看看