• 左侧菜单选中状态


    三种方案:

    第一:使用url传参,给rul加 ?index=x

    eg:https://www.baidu.com?index=1


    $.sidebarMenuActive = function() {
    var index = 0;
    var oList = $('.js_sidebarMenu');
    var aA = $(".js_sidebarMenu .treeview-menu li a");
    var url = window.location.href;

    // 初始化页面
    init();

    // 先写一个功能函数,从链接地址中获取 index 的值
    function getIndex(url, key) {

    if (!url) { return; }
    var arr = url.slice(url.indexOf('?') + 1).split('&');
    return function() {
    for(var item in arr) {
    var otherArr = arr[item].split('=');
    if (otherArr[0] == key) {
    return otherArr[1];
    };
    }
    }();
    }

    // 初始化函数,找到哪一个按钮是当前状态
    function init() {
    index = getIndex(url, 'index') ? getIndex(url, 'index') : 0;
    aA[index].className = 'is-active';
    }
    }

    $.sidebarMenuActive();

    第二种方案
    // 使用url匹配当前页面是否添加is-active
    $.urlMenuActive = function() {
    var url = location.href;
    var arr=new Array();
    var i = 0;
    var aA = $(".js_sidebarMenu .treeview-menu li a");
    var isChange = 0;

    // 获取所有菜单栏url
    function getUrlArr(){
    $(".js_sidebarMenu>li").each(function(){
    $(this).find(".submenu>li").each(function(){
    var href = $(this).find("a").attr("href");
    var lastStr = href.lastIndexOf('/');
    var isNum = href.substr(lastStr+1, href.length);

    if(!isNaN(isNum)){ // /后是数字
    href = href.substr(0, lastStr); //截取
    }
    arr[i] = href;
    i++;
    });
    });
    }
    getUrlArr();
    i = null;

    // 存值到 sessionStorage
    for(var j=0; j<arr.length; j++){
    if(url.indexOf(arr[j])!=-1){
    sessionStorage.setItem("url", arr[j]);
    sessionStorage.setItem("urlKey", j);
    isChange = 1;
    break;
    } else{
    isChange = 0;
    }
    }
    j = null;

    var active = sessionStorage.getItem("url");
    var activeKey = sessionStorage.getItem("urlKey");

    // 找到哪一个菜单是当前状态
    if(isChange==1){
    aA.removeClass("is-active");
    aA[activeKey].className = 'is-active';
    }

    }

    第三种方案:

    使用localStorage

    $(document).ready(function () {
    $(".submenu a").click(function() {
    localStorage.setItem("activeId", $(this).attr("id"));
    });
    var currentActive = localStorage.getItem("activeId");
    if (currentActive) {
    var $currentActive = $("#" + currentActive);
    $currentActive.addClass("is-active");
    $currentActive.parent().parent().attr("style", "display: block;");
    $currentActive.parent().parent().parent().find(".inactive").addClass("active");
    }
    });

  • 相关阅读:
    linux引导系统
    Android开发面试经——2.常见Android基础笔试题
    Android开发面试经——1.常见人事面试问题
    Android面试题整理【转载】
    android设置软键盘搜索键以及监听搜索键点击时发生两次事件的问题解决
    Android软键盘弹出时把布局顶上去的解决方法
    Android入门:绑定本地服务
    Android aidl Binder框架浅析
    Android LayoutInflater深度解析 给你带来全新的认识
    Android RecyclerView 使用完全解析 体验艺术般的控件
  • 原文地址:https://www.cnblogs.com/yangjing1314/p/8304996.html
Copyright © 2020-2023  润新知