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

最新推荐文章于 2023-01-27 01:17:04 发布

ludan1449092771

最新推荐文章于 2023-01-27 01:17:04 发布

阅读量695

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery javascript

本文链接：https://blog.youkuaiyun.com/ludan1449092771/article/details/48931703

jquery 同时被 2 个专栏收录

2 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现前端导航栏动态切换功能，并通过URL历史记录管理来跟踪用户导航路径的方法。具体包括解析URL参数，根据参数动态加载不同页面内容，并在用户点击导航项时更新URL和页面内容。

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

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

});