Question

我有一个工作的html页面，我想要做的是使用jquery包含一个页脚。但是，每当我在标签中放入任何jquery时，它都会导致页面空白，我不确定出了什么问题。

以下是该页面的缩写版本：

<!DOCTYPE html>
<html id="index-page">
<head>
    <title>Data</title>
    <!-- TODO: SEO goes here-->
    <link rel="stylesheet" type="text/css" href="libs/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">

    <!-- Fonts -->
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic">
</head>
<body>
    <h1> Stuff goes here </h1>
    <h2> other stuff here </h2>
    <div id="footer"></div>

    <!-- ============== Scripts ============== -->
        <!-- extern libs -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- TODO: switch out with our cdn-->
            <script>
                        $('#footer').load('footer.html');
            </script>
        <!-- config/init -->
            <script src="scripts/init.js"></script>
            <!-- services -->
            <!-- modules -->
                <!-- These files bind DOM elements to the JS Application Logic -->
                <script src="scripts/modules/indirect.hover.module.js"></script>
    </body>
</html>

如果我拿出包含代码的标签来加载footer.html，那么一切都很好。但是，只要我包含这些标签，页面就是空白，我不知道为什么。

footer.html的最小化版本如下所示：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="libs/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="images/fonts/fonts.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic">
    <script src="//code.jquery.com/jquery-1.11.0.js"></script>
</head>
<body>
    <footer>
     <h1>stuff here</h1>
    </footer>
</body>
</html>

Answer 1

准备好文件。

另外...... footer.html实际上是在为当前文件提供服务的目录中可用的文件吗？因为如果不是......可能是脚本找不到文件的情况。也许你需要（＆＃39; ../ footer.html＆＃39;）或类似的东西。检查目录结构

        <script>
        $(document).ready(function(){
            $('#footer').load('footer.html');
        });
        </script>

根据显示footer.html的更新代码判断

您应该将页脚文件更改为

 <footer>
   <h1>stuff here</h1>
  </footer>

多数民众赞成...... 你真的不需要重新宣布任何东西。（脚本，css头，HTML等）只需要加载您要加载的内容。

删除doctype，css文件和所有其他不相关的代码

将jquery脚本添加到我的html会导致出现空白页面

1 个答案: