其他分享
首页 > 其他分享> > jq设置页面内多级导航切换显示不同的内容

jq设置页面内多级导航切换显示不同的内容

作者：互联网

效果：

 

 

 左侧导航结构代码：绑定id名为pcnav

 

 

 

 右侧结构代码：绑定id名为pcson

 

 

 

jq代码：



    // PC端的nav切换
    $("#pcnav>li:eq(0)").addClass('centerbox_in_disc'); // 第一个nav标红
    $("#pcson>div").hide();
    $("#pcson>div:eq(0)").show();  // 对应第一个nav的内容显示
    $("#pcnav>li>.centerbox_in_left_nav_son").hide();
   
   
    $("#pcnav>li").click(function(){  
        let index=$(this).index();//获取
       
        $("#pcnav>li:eq("+index+")>.centerbox_in_left_nav_son").stop().slideToggle(200,function(){
            $(".centerbox_in_left_nav_son>div").off().on('click', function(){
                let sonindex=$(this).index(); //获取
                $(this).parent().stop().slideToggle();
                let parindex=$(this).parent().parent().index(); //获取


                $("#pcnav>li>.centerbox_in_left_nav_son>div").removeClass('color_main');
                $("#pcnav>li:eq("+parindex+")>.centerbox_in_left_nav_son>div:eq("+sonindex+")").addClass('color_main');


                $("#pcnav>li").removeClass('centerbox_in_disc');
                $("#pcnav>li:eq("+index+")").addClass('centerbox_in_disc');


                $("#pcson>div").fadeOut(0);
                $("#pcson>div:eq("+parindex+")").fadeIn(0);


                $("#pcson>div:eq("+parindex+")>.centerbox_in_right_main>div").hide();
                $("#pcson>div:eq("+parindex+")>.centerbox_in_right_main>div:eq("+sonindex+")").show();


            });
        });
    })





 


标签：pcnav,多级,jq,li,nav,div,centerbox,eq,页面	

来源： https://www.cnblogs.com/zhainverer/p/16378216.html