首页 > 建站教程 > JS、jQ、TS >  跨页面tab选项卡正文

跨页面tab选项卡

    tab选项卡,一般情况下都是在一个页面,很少跨页面,点击查看普通的tab选项卡。但是如果跨页面怎么办呢,肯定要传递参数,例如,在A页面,点击选项卡的其中一个选项,调到B页面的同时,显示对应的选项内容,可以这么实现:
    首先,在A页面想办法把选项卡选项的index等用来获取点击的哪个选项卡选项的内容传到网址上,我爱模板网是这么解决的,A页面代码:
<a href="tab.html?i=0">选项卡1</a>
<a href="tab.html?i=1">选项卡2</a>
<a href="tab.html?i=2">选项卡3</a>
<a href="tab.html?i=3">选项卡4</a>
     跳转到B页面的同时,获取传递过来的参数,再利用参数,找到对应的选项内容,让其显示,简单的jquery代码如下:
$(function(){
	var url = location.href;
	var i = url.substr(url.length-1,1);
	$("#tabItem li").eq(i).addClass("on").siblings().removeClass("on");
	$("#tabCon li").eq(i).show().siblings().hide();
	$("#tabItem li").click(function(){
		var index = $(this).index();
		$(this).addClass("on").siblings().removeClass("on");
		$("#tabCon li").eq(index).show().siblings().hide();
	})
})
     最终效果:跨页面TAB选项卡