Question

我正在尝试在我的html页面中加载一个公共页脚，但它似乎不起作用。我将页面的主体分成两列，我认为这就是为什么我无法调用我的页脚加载到正确的区域。

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

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

其余代码可以在jsfiddle上找到，我删除了col1中不是页脚的所有内容。

Answer 1

$('#col1.footer')与任何元素都不匹配。正确的选择器是$('#footer')。也要确保只有一个元素具有此ID。

此外，将<{1}} 放在结束标记之后。在此之前，浏览器的DOM还不知道元素。

如果你想要课程（即存在几个页脚），请使用：

<script>

Answer 2

您可以使用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中加载公共页脚

2 个答案: