爲什麼一些jquery代碼只能在我的html-body部分的末尾工作？

Question

我有下面的代碼來創建制表符。它在html正文部分的結尾處工作，但如果我將其放置在開始位置 - 在定義所有div之前，則不會。爲什麼會這樣？

<script type="text/javascript"> 
    $("ul.tabs li.label").hide(); 
    $("#tab-set > div").hide(); 
    $("#tab-set > div").eq(0).show(); 
    $("ul.tabs a").click(
    function() { 
     $("ul.tabs a.selected").removeClass('selected'); 
     $("#tab-set > div").hide(); 
     $(""+$(this).attr("href")).show(); 
     $(this).addClass('selected'); 
     return false; 
    } 
); 
    $("#toggle-label").click(function() { 
    $(".tabs li.label").toggle(); 
    return false; 
    }); 
</script> 

Answer 1

您需要的文件準備塊包裹。這可以防止代碼在頁面完全加載之前觸發。

<script type="text/javascript"> 
    $(function() { 
     // do something on document ready 
     $("ul.tabs li.label").hide(); 
     $("#tab-set > div").hide(); 
     $("#tab-set > div").eq(0).show(); 
     $("ul.tabs a").click(
     function() { 
      $("ul.tabs a.selected").removeClass('selected'); 
      $("#tab-set > div").hide(); 
      $(""+$(this).attr("href")).show(); 
      $(this).addClass('selected'); 
      return false; 
     } 
    ); 
     $("#toggle-label").click(function() { 
     $(".tabs li.label").toggle(); 
     return false; 
     }); 
    }); 
</script> 

Answer 2

這很可能是因爲DOM尚未準備好，因此它們不存在。

因此，你需要做到以下幾點：

$(function() { 
    // Any code in here will only be executed when the DOM is ready. 
}); 

Answer 3

jQuery(function($) { 
    // put your code in here and it will be executed 
    // when the document has fully loaded. 
});