您的位置:首页 > 其它

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

2015-10-06 15:24 295 查看


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

$(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')
}
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: