javascript單擊功能的問題

Question

使用下面的代碼，當單擊菜單項時，它會從外部html文件加載內容。當我點擊每個菜單項時，每個外部html文件的內容都停留在頁面上。我怎樣才能做到這一點，因爲當我點擊時，只顯示點擊菜單項中的內容？

<script type="text/javascript"> 
     $(function(){ 
      $("#accordion1").click(function(evt){ 
       $("#course1").load("course1.html") 
       evt.preventDefault(); 
      }) 

      $("#accordion2").click(function(evt){ 
       $("#course2").load("course2.html") 
       evt.preventDefault(); 
      }) 

      $("#accordion3").click(function(evt){ 
       $("#course3").load("course3.html") 
       evt.preventDefault(); 
      }) 
     }) 
    </script> 

<div id="content"> 
      <div id="course1"> 
      </div> 
      <div id="course2"> 
      </div> 
      <div id="course3"> 
      </div> 
     </div> 

Answer 1

你可以簡單地清空其他元素，使用$().empty()，但我認爲一個更好的解決辦法是切換可見，使用類似$().toggleClass('hiddenCourse')以及與此類相關聯的display:none CSS。

另外，由於每次讀取文件的響應速度都非常慢，而且對網絡的要求很高，您應該考慮記住哪些文件已被提取幷包含在DOM中。

另一種方法是在頁面加載時準備好所有內容，因此唯一剩下的任務就是可見性切換。它取決於很多參數：如果內容的總和很大（文件的大小和數量），如果您更喜歡速度較慢的啓動交易中的快速響應應用程序，訪問者可能打開的部分數量等等上。

Answer 2

加載html文件時刪除其他div的內容。

Answer 3

看起來你想要的東西，像手風琴UI效果

這裏一看，這樣你只需要一次加載內容。 http://docs.jquery.com/UI/API/1.8/Accordion

還要求$('#id').empty();將刪除內容。

Answer 4

如果我的理解，要清除掉對方<div> S：

<script type="text/javascript"> 
    $(function(){ 
     $("#accordion1").click(function(evt){ 
      $("#course1").load("course1.html"); 
      $("#course2").empty(); 
      $("#course3").empty(); 
      evt.preventDefault(); 
     }) 

     $("#accordion2").click(function(evt){ 
      $("#course2").load("course2.html"); 
      $("#course1").empty(); 
      $("#course3").empty(); 
      evt.preventDefault(); 
     }) 

     $("#accordion3").click(function(evt){ 
      $("#course3").load("course3.html"); 
      $("#course1").empty(); 
      $("#course2").empty(); 
      evt.preventDefault(); 
     }) 
    }) 
</script> 

Answer 5

你既可以：

• 負荷空URL中的其他div的加載新的內容
前
• 加載新內容前刪除所有div的內容
• 保留內容，但使用CSS隱藏不會發生點擊事件的div