javascript - 为什么某些 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

这很可能是因为 DOM 尚未准备好，因此它们不存在。

因此，您需要执行以下操作:

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