Question

我有一个index.html页面：

<body>

<ul>
    <li><a id="page" href="#">About</a></li>
</ul>
<div id="show">
</div>

</body>

一个jQuery：

    <script type="text/javascript">
        $(document).ready(function(){
           $("#page").click(function(){
            $('#show').load('test.html');
           }); 
         });
    </script>

我需要的是在#show div中显示来自test.html的内容，但上面的代码不起作用。

所以我的问题是：我做错了什么？

PS：我正在使用链接<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>中的jQuery 1.9.1库，它可以与其他jQuery脚本一起使用。

编辑：

没关系，我用iFrame来显示其他网页/网站cotent，jQuery：

jQuery(document).ready(function($) {
$(".faq").click(function () {
    $("#loader").fadeIn(10);
    $("#content").delay(800).fadeIn(200);
    $("#mainFrame").attr("src", "http://www.wordpress.org");
});
$(".other").click(function () {
    $("#loader").fadeIn(10); 
    $("#content").delay(800).fadeIn(200);
      $("#mainFrame").attr("src", "http://www.othersite.com");
});
$("#hide").click(function () {
    $("#loader").css("display", "none"); 
    $("#content").fadeOut(200);
    setTimeout(function(){
        $("#mainFrame").attr("src", "about:blank");
    }, 250);
});
});

和HTML：

<ul>
    <li><a class="faq" href="#">Show</a></li>
    <li><a class="other" href="#">Show</a></li>
</ul>
<div id ="loader"></div>
<div id="content">
<input type="button" id="hide" value="hide"></button>
<iframe src="" scrolling="no" frameborder="0" id="mainFrame" name="mainFrame"></iframe></div>

Answer 1

我通常这样做

$(function() {
$('.myButton').on('click',function() {
    var path = (this).id + '.html'
    $("#myTarget").load(path);
});
});

只需确保您的按钮与.php / .html文件名为

的ID相同

Answer 2

您正在将HTML注入HTML，而我认为您希望将纯文本注入HTML。 $ .load不适用于此。您应该使用$ .ajax或类似的东西来获得结果，然后使用$ .text（）来注入结果。

$("#page").click(function() {
    $.ajax({
        url: "test.html"
        success: function(data) {
            $("#show").text(data)
        }
    })
})

在div中显示html页面的内容

2 个答案: