通过url的ID,实现tab切换的效果
url地址栏:http://www.jianshu.com/?type=detail&id=1
html部分:
<ul class="tab-nav">
<li><a href="http://www.jianshu.com/?type=detail&id=1">简介</a></li>
<li><a href="http://www.jianshu.com/?type=detail&id=2">地址</a></li>
<li><a href="http://www.jianshu.com/?type=detail&id=3">电话</a><li>
</ul>
JS代码部分:
var urlid = getUrlParam('id');
urlid = urlid -1;
var tabs = $('.tab-nav li');
if (urlid == '0') {
tabs.eq(urlid).find('a').parent().addClass('active');
tabs.eq(urlid).siblings().find('a').parent().removeClass('active');
}else{
tabs.eq(urlid).find('a').parent().addClass('active');
tabs.eq(urlid).siblings().find('a').parent().removeClass('active');
};
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}