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

效果：

 

 

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

 

 

 

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

 

 

 

jq代码：







 1     // PC端的nav切换
 2     $("#pcnav>li:eq(0)").addClass('centerbox_in_disc'); // 第一个nav标红
 3     $("#pcson>div").hide();
 4     $("#pcson>div:eq(0)").show();  // 对应第一个nav的内容显示
 5     $("#pcnav>li>.centerbox_in_left_nav_son").hide();
 6     
 7     $("#pcnav>li").click(function(){  
 8         let index=$(this).index();//获取 
 9         var nums = $("#pcnav>li:eq("+index+")>.centerbox_in_left_nav_son>div").length;
10         // console.log(nums);
11         if(nums == 0){
12 
13             $("#pcnav>li>.centerbox_in_left_nav_son>div").removeClass('color_main');
14             $("#pcnav>li").removeClass('centerbox_in_disc');
15             $("#pcnav>li:eq("+index+")").addClass('centerbox_in_disc');
16             $("#pcson>div").fadeOut(0);
17             $("#pcson>div:eq("+index+")").fadeIn(0);
18         }else {
19             $("#pcnav>li:eq("+index+")>.centerbox_in_left_nav_son").stop().slideToggle(200,function(){
20                 $(".centerbox_in_left_nav_son>div").off().on('click', function(){
21                     let sonindex=$(this).index(); //获取
22                     $(this).parent().stop().slideToggle();
23                     let parindex=$(this).parent().parent().index(); //获取
24 
25                     $("#pcnav>li>.centerbox_in_left_nav_son>div").removeClass('color_main');
26                     $("#pcnav>li:eq("+parindex+")>.centerbox_in_left_nav_son>div:eq("+sonindex+")").addClass('color_main');
27 
28                     $("#pcnav>li").removeClass('centerbox_in_disc');
29                     $("#pcnav>li:eq("+parindex+")").addClass('centerbox_in_disc');
30 
31                     $("#pcson>div").fadeOut(0);
32                     $("#pcson>div:eq("+parindex+")").fadeIn(0);
33 
34                     $("#pcson>div:eq("+parindex+")>.centerbox_in_right_main>div").hide();
35                     $("#pcson>div:eq("+parindex+")>.centerbox_in_right_main>div:eq("+sonindex+")").show();
36                 });
37             });
38         }
39         
40     })




 




 


 


 


 








            

            
posted @ 
2022-06-15 13:53 
宅女二二 
阅读(143) 
评论(0) 
 
收藏 
举报