jq table页二级联动

 1                     <div class="layerRtb layerRtb-threecolumn">
 2                         <div class="clearfix layerRtb-head uiTitle2">
 3                             <i class="uiTitle-icon"></i>
 4                                 开工准备详情
 5                             <i class="fr rig_close">×</i>
 6                         </div>
 7                             <div class="">
 8                                 <div class="p20">
 9                                     <div class="Tab">
10                                         <ul class="TabUl clear">
11                                             <li class="active2 aa">安全准备</li>
12                                             <li class="aa">摄像头准备</li>
13                                             <li class="aa">文明准备</li>
14                                             <li class="aa">质量准备</li>
15                                         </ul>
16                                         
17                                         <div class="side">
18                                             <span class="active1 start">消防安全</span>|<span class="start">用电安全</span>    
19                                         </div>
20                                         
21                                         
22                                         <div class="TabU clear layerRtb-scroll">
23                                             <div class="main0">
24                                                 
25                                                      <div class="one">
26                                                          <ul class="up">
27                                                                <li data-src = "images/pic/1.jpeg"><img src="images/pic/1.jpeg" alt="" /></li>
28                                                             <li data-src = "images/pic/2.jpeg"><img src="images/pic/2.jpeg" alt="" /></li>
29                                                             
30                                                         </ul>    
31                                                     
32                                                         <p class="save">消防安全</p>
33                                                         <p class="check">验收标准验收标准验收标准验收标准验收标准验收标准标准验收标准</p>
34                                                     
35                                                     <ol class="down">
36                                                                 <li data-src = "images/pic/3.jpeg"><img src="images/pic/3.jpeg" alt="" /></li>
37                                                                 <li data-src = "images/pic/4.jpeg"><img src="images/pic/4.jpeg" alt="" /></li>
38                                                         </ol>
39                                                     </div>
40                                                 
41                                                 <div class="TabCon p10 hide">
42                                                      1-2
43                                                 </div>
44                                             </div>
45                                             
46                                             <div class="main1">
47                                                 
48                                             <div class="TabCon p10 hide">
49                                                  2-1
50                                             </div>
51                                             
52                                             <div class="TabCon p10 hide">
53                                                  2-2
54                                             </div>
55                                             
56                                             </div>
57                                             
58                                             <div class="main2">
59                                             <div class="TabCon p10 hide">
60                                                  3-1
61                                             </div>
62                                             <div class="TabCon p10 hide">
63                                                  3-2
64                                             </div>
65                                             </div>
66                                             
67                                             <div class="main3">
68                                             <div class="TabCon p10 hide">
69                                                  4-1
70                                             </div>
71                                             <div class="TabCon p10 hide">
72                                                  4-2
73                                             </div>
74                                             </div>
75                                         
76                                         </div>
77                                            
78                                     </div>
79                                 </div>
80                             </div>
81                         <div class="layerRtb-footer clearfix">
82                             <div class="fr">
83                                 <input type="button" value="确定" class="uiBtn-blue uiBtn-small fl layerSureBtn"/>
84                                 <input type="button" value="取消" class="uiBtn-gray uiBtn-small fl ml10 layerCancelBtn"/>
85                             </div>
86                         </div>
87     </div>

$(function(){
                var ind;
                $(".main0").find('div').eq(0).stop(true).show();
                $('.TabUl li').each(function(i,item){
                    $(this).on('click',function(e){
                        ind=i;
                        console.log(ind)
                        var  texts=$(e.target).text();
                        $(this).addClass('active2').siblings().removeClass('active2');
                        $('.start').text(texts);
                        $('.side span').eq(0).addClass('active1').siblings().removeClass('active1');
                        $(".main"+ind).find('div').eq(0).stop(true).show().siblings().stop(true).hide();
                        $('.TabU').children().eq(ind).show().siblings().hide();
                        
                        
                    });
                });
                
                $('.side span').each(function(index){
                    $(this).on('click',function(){
                        console.log(ind)
                        if(ind=='undefined'||ind==null){
                            ind=0;
                        $(".main"+ind).find('div').eq(index).show().siblings().hide();
                        }
                        $('.TabCon').hide();
                        $(this).addClass('active1').siblings().removeClass('active1');
                        $(".main"+ind).find('div').eq(index).show().siblings().hide();
                        
                    })
                })
            });