如何顯示和隱藏內部div點擊3級？

Question

我已經在我的網頁結構如下

HTML：

 <div style="position:relative; width:200px; height:100px; overflow:hidden;"> 
       <div style="position:absolute;" id="innerDiv"> 
        <table style="width:400px;height:50px;" border="1" id="innerTable"> 
         <tr> 
          <td> 
           <div id="td1"class="monthDiv" style="white-space:nowrap;"> 
            2000 
           </div> 
           <div id="td2" style="white-space:nowrap;"> 
           <table> 
            <tr><td id="quarter1">JAN-JUN00</td><td id="quarter2">JUL-DEC00</td></tr> 
           </table> 
           </div> 
          </td> 

          <td> 
           <div id="w" style="white-space:nowrap;"> 
            2001 
           </div> 
          </td> 
         </tr> 
        </table> 
       </div> 
      </div> 

JAVASCRIPT：

$("#td1").click(function(){ 
     $("#td1").hide('slow'); 
     $("#td2").show('slow'); 
    }); 

    $("#td2").click(function(){ 
     $("#td2").hide('slow'); 
     $("#td1").show('slow'); 
    }); 
    $("#quarter1").click(function(){ 

     }); 
$("#quarter2").click(function(){ 

     }); 

所以，當我點擊'td1'(2000)我顯示'td2'(JAN-JUN00 AND JUL-DEC00)'，反之亦然，但我當點擊'quarter1'時需要顯示另一個div(JAN00 FEB00 ... JUN00)。此外，我需要找到哪個div點擊事件被解僱，'quarter1'或'quarter2'顯示(JUL00 AUG00 ... DEC00)

請幫我。

Answer 1

你可以簡單地調用一個show事件div你希望顯示的quarter1點擊：

$("#quarter1").click(function(){ 
    alert('quarter1'); 
    $('#quart1').show('slow'); 
}); 
$("#quarter2").click(function(){ 
    alert('quarter2'); 
    $('#quart2').show('slow'); 
}); 

quart1和quart2是id S中div S的要顯示。

編輯：

補充一點：

$("#td1").click(function(e){ 
    e.stopPropagation(); 
    $("#td1").hide('slow'); 
    $("#td2").show('slow'); 
}); 

$("#td2").click(function(e){ 
    e.stopPropagation(); 
    $("#td2").hide('slow'); 
    $("#td1").show('slow'); 
});