Question

将html内容加载到div中有点困难。

我试图模仿这篇文章中发生的事情： https://codereview.stackexchange.com/questions/64192/loading-div-sections-from-separate-files

链接只是单独打开内容，而不是在#target div中加载内容。

我的javascript是：

<script>
$(document).ready(function() {
$("#but_edu").click(function(){
$("#target").load("education.txt", aviso);
});
});
</script>

我的HTML是：

<body>
<div id="wrapper">
<section id="headTop">
<img src="img/ap_logo2.png" alt=""/>
</section>
<section id="headNav">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <div class="row" id="navigation" style="margin-top:60px;">

                <div class="col-md-3 txtCenter"><a href="#" id="but_edu">  <img class="gradPic" src="img/grad.png"alt=""/></a>
                        </div>
                <div class="col-md-3 txtCenter"><a href="ajax/experience.html" id="but_exp"><img class="gradPic" src="img/exp.png" alt=""/></a>
                        </div>
                <div class="col-md-3 txtCenter"><a href="ajax/skills.html" id="but_skill"><img class="gearPic" src="img/gear.png" alt=""/></a>
                        </div>
                <div class="col-md-3 txtCenter"><a href="ajax/projects.html"     id="but_proj"><img class="gradPic" src="img/exp.png" alt=""/></a>
                        </div>
                            </div>

        </div>
        <div class="col-md-3"></div>
        </div>
</section><!--HeadNav Section Ends-->
<section id="cHold">
    <div id="target"></div>
</section>

Answer 1

看起来对我很有用：

http://jsfiddle.net/eetfqy9y/

HTML 的

<section id="headNav">
    <a href="#" id="but_edu">Click me!</a>
</section>

<section id="cHold">
    <div id="target"></div>
</section>

的Javascript

$(document).ready(function () {
    $("#but_edu").click(function () {
        $("#target").load("//fiddle.jshell.net");
    });
});

要注意的一件事是确保加载网址有效。你可以为我打开你的JavaScript控制台（ ctrl + J ）并检查请求404是否。

简单.load的html文件并不那么简单

1 个答案: