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

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

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

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

<ul class="folder-list no-padding left_nav">
	<t:if test="getIfKf()">
		<t:if test="getIfTxtgg()">
			<li><a t:type="EventLink" t:id="txtgg" context="3"
					class="left_nav_on sign">推广人系统公告</a></li>
			<p:else>
			<li><a t:type="EventLink" t:id="txtgg1" context="3"
						class="sign">推广人系统公告</a></li>
			</p:else>
				</t:if>
			<p:else>
			<t:if test="getIfXtgg()">
			<li><a t:type="EventLink" t:id="xtgg" context="4"
							class="sign">系统公告</a></li>
			<p:else>
			<li><a t:type="EventLink" t:id="xtgg1" context="4"
						class="sign">系统公告</a></li>
			</p:else>
	</t:if>
</ul>

这是后台代码，就当是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了！