左侧菜单选中状态

三种方案:

第一:使用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");
}
});

 

posted @ 2018-01-17 18:55  暖爱  阅读(1439)  评论(0编辑  收藏  举报