用a标签刷新当前页面进行tab切换并绑定样式

最近替别的部门优化项目，又一次遇到了这个问题那就顺便记载一下吧，先看下效果

直接截图放这，看着有点失真。。。这不是重点

重点是：页面每次加载首先默认选中的是左侧第一个tab，然后切换给自身加样式，因为是a标签，所以每次都会刷新页面，使用正常手段我们肯定不能够实现这样的效果，我能想到的就是利用缓存。简单说下思路就是：存下标取下标，最后清除，因为每次加载要第一个默认有样式的！这样就实现了图上效果！下面附上我的代码！

	
		
			
推广人系统公告
			
			
推广人系统公告
			
				
			
			
			
系统公告
			
			
系统公告
			
	

这是后台代码，就当是html格式就行

下面是利用jq去处理实现的效果

$(function(){	
	function saveTabActive(){
		var strIndex=null;
		$('.left_nav li').click(function(){
			window.localStorage.setItem('index',$(this).index());
		})
		strIndex=window.localStorage.getItem('index');
		console.log(strIndex)
		if(strIndex == null){
		    $('.left_nav li').eq(0).children('a').addClass('left-nav-active');
		}else{
			$('.left_nav li').eq(strIndex).children('a').addClass('left-nav-active');
			$('.left_nav li').eq(strIndex).siblings().children('a').removeClass('left-nav-active');
			window.localStorage.removeItem('index');
		}
	}
	saveTabActive();
})

按我上面所说的思路去理解这段逻辑就OK了！