Javascript 在HTML中加载公共页脚

-我的手

我试图在整个html页面中加载一个公共页脚，但它似乎不起作用。我把我的页面主体分成两列，我想这就是为什么我不能调用我的页脚来加载到正确的区域

如何从单独的文件加载页脚

<div id="col1">
    <div id="footer">
        <script type="text/javascript">
        //<![CDATA[
        $("#col1.footer").load("footer.html");
        //]]>
        </script>
    </div>
</div>

//

剩下的代码可以在JSFIDLE上找到，我删掉了col1中没有页脚的所有内容。

$（“#col1.footer”）

与任何元素都不匹配。正确的选择器是

$（'#footer'）

。还要确保只有一个元素具有此ID

另外，将

放在结束标记之后。在此之前，浏览器的DOM还不知道元素

如果您想要类（即存在多个页脚），请使用以下命令：

<div id="col1">
    <div class="footer">
    </div>
</div>
<script type="text/javascript">
$("#col1 .footer").load("footer.html");
//      ^--- note the space
</script>

$（“#col1.footer”）.load（“footer.html”）；
//^---注意空格

您可以使用jquery轻松地完成此操作。 只需在你的网页中包含一次

$(function(){
    $("[data-load]").each(function(){
        $(this).load($(this).data("load"), function(){
        });
    });
})

现在在任何元素上使用数据加载从外部html文件调用其内容 您只需在html代码中添加一行内容即可

范例

<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>

这是动态加载的html吗？还是在第一次加载时的html中？还有，为什么不是php:

这是一个作业，不幸的是，我们不允许使用php：（@Martijn我猜他的文件是.html而不是。php@Stormie您应该使用$（document.ready（）。当我使用“$”（“#footer”）。load（“footer.html”）；”时，会将整个页面更改为带有“上次更新”的空白屏幕您的HTML有效吗？未关闭的标记可能会这样做。是的，在此之前，所有内容都已验证且未更改。现在它仍在验证：cI已经组合了一个最小的工作JSIDLE：（不必担心

{HTML…}

，这基本上是JSIDLE应该回显的内容）。您能确定您的代码偏离了这一点吗？