jquery - 使用 jQuery 在 div 中加载内容

Question

我有一个 jQuery 代码来从模式窗口中的链接加载内容。这是我的jQuery代码：

$(document).ready(function() {
    var $loading = $('<img src="loading.gif" alt="loading">');

    $('#page-help').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            $dialog
                .load($link.attr('href'))
                .dialog({
                    title: $link.attr('title'),
                    width: 500,
                    height: 300
                });

            $link.click(function() {
                $dialog.dialog('open');

                return false;
            });

            return false;
        });
    });
});

HTML 代码：

<a id="page-help" href="index2.html">Test</a>

我想在DIV中加载内容，而不是在模式窗口中！我怎么能这样做？:(

Answer 1

如果您想将一些外部页面的内容加载到 div中，我在https://stackoverflow.com/a/6949666/1158603找到了最佳答案

<a href="/page1">Load Page 1</a>
<a href="/page2">Load Page 2</a>
<a href="/page3">Load Page 3</a>
<a href="/page4">Load Page 4</a>

<div id="LoadMe">Where external page will load into</div>

$('a').click(function() {
  $('#LoadMe').load($(this).attr('href'));

  return false;
});

Answer 2

您可以在 jquery中使用$.load方法：

首先，您必须有一个 div 要将内容加载到：

<div id="container"></div>
<img id="img" src="loading.gif" style="display:none;"/>

然后在你的脚本中：

$('#page-help').click(function(){
    $('#img').show();
    $('#container').load('index2.html', function(){
       $('#img').hide();
   });
});