为什么一些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. 
});