左侧菜单选中状态
三种方案:
第一:使用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");
}
});