美文网首页
通过url的ID,实现tab切换的效果

通过url的ID,实现tab切换的效果

作者: mickeylight | 来源:发表于2016-11-01 09:38 被阅读0次

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

    }

    相关文章

      网友评论

          本文标题:通过url的ID,实现tab切换的效果

          本文链接:https://www.haomeiwen.com/subject/jxcmuttx.html