通过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; //返回参数值

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容