Javascript 使用jQuery加载模板-错误的div_Javascript_Jquery_Html

Javascript 使用jQuery加载模板-错误的div

javascript jquery html

Javascript 使用jQuery加载模板-错误的div,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试使用jQuery将三个模板加载到主页中。档案如下： index.html <body> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> <script> $(function(){ $(".

我正在尝试使用jQuery将三个模板加载到主页中。档案如下：

index.html

<body>
    <div class="header">
    </div>
    <div class="content">   
    </div>
    <div class="footer">
    </div>
<script> 
    $(function(){
         $(".header").load("/views/header.html");
         $(".content").load("/views/content.html");
         $(".footer").load("/views/footer.html"); 
    });
</script>
</body>

<div>Header</div>

<div>Content</div>

<div>Footer</div>


$（函数（）{
$（“.header”）.load（“/views/header.html”）；
$（“.content”）.load（“/views/content.html”）；
$（“.footer”）.load（“/views/footer.html”）；
});

header.html

<body>
    <div class="header">
    </div>
    <div class="content">   
    </div>
    <div class="footer">
    </div>
<script> 
    $(function(){
         $(".header").load("/views/header.html");
         $(".content").load("/views/content.html");
         $(".footer").load("/views/footer.html"); 
    });
</script>
</body>

<div>Header</div>

<div>Content</div>

<div>Footer</div>

标题

content.html

<body>
    <div class="header">
    </div>
    <div class="content">   
    </div>
    <div class="footer">
    </div>
<script> 
    $(function(){
         $(".header").load("/views/header.html");
         $(".content").load("/views/content.html");
         $(".footer").load("/views/footer.html"); 
    });
</script>
</body>

<div>Header</div>

<div>Content</div>

<div>Footer</div>

内容

footer.html

<body>
    <div class="header">
    </div>
    <div class="content">   
    </div>
    <div class="footer">
    </div>
<script> 
    $(function(){
         $(".header").load("/views/header.html");
         $(".content").load("/views/content.html");
         $(".footer").load("/views/footer.html"); 
    });
</script>
</body>

<div>Header</div>

<div>Content</div>

<div>Footer</div>

页脚

无论出于何种原因，header.html被加载到content div中（我使用括号作为编辑器）。我做错什么了吗？如何解决此问题？

无从得知。鉴于您正在显示的代码，它应该可以工作，尽管

脚本

标记应该在

正文

标记中。@Mikemcaughan更新了我的问题您确定没有在文本编辑器的三个单独文件中复制/粘贴相同的

html

？确定文件内容与上面显示的内容相同吗？例如，内容文件中的

头不是偶然的吗？@jao 100%确定。。。此外，标题和内容都在内容分区中。。。不知道为什么