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