web链接与tab切换对应的效果

来源：互联网发布：公安大数据情报分析编辑：程序博客网时间：2024/06/17 10:45

这三个地方会相对应的一至,之前实现的时候要依赖后台点击导航的时候传递个参数,但是现在可以用前端独立完成

$(function(){    var tabBox=$('#tab');    var leftChild=tabBox.find('.tab_left .slider-child');    var rightCont=tabBox.find('.tab_right .tab_right_cont');    leftChild.removeClass('active');    rightCont.hide();    var loc = location.href;    var n1 = loc.length;//地址的总长度    var n2 = loc.indexOf("=");//取得=号的位置    var nameValue = loc.substr(n2+1, n1-n2);//从=号后面的内容    var deng = loc.indexOf("?");//取得？号的位置    var name = loc.substr(deng+1, 4);//从=号后面的内容    var url = loc.substr(0, n2);    //profile==0    if(nameValue=='profile'){        nameValue=0;        leftChild.eq(nameValue).addClass('active');        rightCont.eq(nameValue).show();    }    if(nameValue=='culture'){        nameValue=1;        leftChild.eq(nameValue).addClass('active');        rightCont.eq(nameValue).show();    }    if(nameValue=='concept'){        nameValue=2;        leftChild.eq(nameValue).addClass('active');        rightCont.eq(nameValue).show();    }    if(nameValue=='partner'){        nameValue=3;        leftChild.eq(nameValue).addClass('active');        rightCont.eq(nameValue).show();    }    leftChild.on('click',function(){        var thisIndex=$(this).index();        leftChild.removeClass('active');        $(this).addClass('active');        rightCont.hide();        rightCont.eq(thisIndex).show();        if(thisIndex==0){            history.replaceState('profile', 'title', url+'=profile')        }        if(thisIndex==1){            history.replaceState('culture', 'title', url+'=culture')        }        if(thisIndex==2){            history.replaceState('concept', 'title', url+'=concept')        }        if(thisIndex==3){            history.replaceState('partner', 'title', url+'=partner')        }    });});

0 0