w3h5

点击a页面链接跳转b页面某个tab切换的实现

a页面有个链接,点击后跳转至 b页面的某个 tab 上,显示相应的内容。

具体方法:

注意:我的部分代码需要有 jQuery 的支持。

首先 a页面的代码:

HTML:

<a href="b.html?tab=2">b_tab2.html</a>

CSS:

a{
	display: inline-block;
	width: 120px;
	height: 36px;
	line-height: 36px;
	background: #00b0f0;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}

效果图:

点击a页面链接跳转b页面某个tab切换的实现 经验总结 第1张

b页面代码:

HTML:

<ul class="tab">
	<li><a href="">tab1</a></li>
	<li><a href="">tab2</a></li>
	<li><a href="">tab3</a></li>
</ul>
<ul class="inner">
	<li><a href="">我是tab1</a></li>
	<li><a href="">我是tab2</a></li>
	<li><a href="">我是tab3</a></li>
</ul>

CSS:

li{
	list-style: none;
	display: inline-block;
	padding: 5px 10px;
	background: #0a8cd2;
}
.tab .active{
	background: green;
}
a{
	color: #FFF;
	text-decoration: none;
}
.inner li{
	display: none;
}
.inner li.active{
	display: inline-block;
}

解释一下,首先有一行 .tab 是 tab按钮, .inner 是对应的三个 li 默认隐藏,第几个 tab 选中就对应的显示第几个 li 。 

?tab= 后面传一个数值,通过 JS 获取到该数值,然后通过该数字控制第几个 tab 的选中及显示隐藏。

JS代码:


<script>
	var m = /tab=([^&]+)/.exec(location.search);
	if(m){
	    console.log(m[1])
	    console.log(m)
	}
	var num = (m[1]-1)
	console.log(num)
	$(".tab li").eq(num).addClass("active");
	$(".inner li").eq(num).addClass("active");
</script>

效果如图:

点击a页面链接跳转b页面某个tab切换的实现 经验总结 第2张

赞 (2)
分享到: +More |

评论 沙发

换个身份