单击链接时，Jquery如何将外部html文件的div加载到容器div中..？答案

【问题标题】：Jquery how to load an external html file's div into a container div when a link is clicked..?单击链接时，Jquery如何将外部html文件的div加载到容器div中..？
【发布时间】：2013-09-30 13:11:10
【问题描述】：

我的网站顶部有一个导航栏，单击的每个类别都会向下滑动一个包含内容的 div。然而，到目前为止，所有这些内容都是在访问网站时一次性加载的，一旦我添加更多文章、帖子、图片等，这是完全没有必要的。

我想从外部文件动态加载内容（也就是说，当您单击导航栏中的“about”时，它会向下滑动以将“about.html”的内容显示到 div 中）。为了组织起见，我希望每个部分都有自己的 .html 文件，以便将来可以轻松编辑。基本上，我希望 jquery 将包装器 div 从 "*variableSectionName".html" 之类的东西加载到 div 中。

这是 jquery 代码，使用变量“section”来显示该 div id 的内容。这可以正常工作，但我无法让 jquery .load() 加载类似 .load(section+".html"+id):

    $(document).ready(function() {
    var active_section;
    $("#slider a.section").click(function(e) {
        e.preventDefault();
        var section = $(this).attr('href');
        if (section !== active_section) {
            $('.pagedrop').slideUp('slow');
            $('.lower').find(section).slideDown('slow', function() {
            active_section = section;
            });
        }
    });
});

以下是 index.html 中链接的样子，其中几个具有不同的名称。我当前的 jquery 代码从中获取了 href "#about"，并使用它一次只显示一个部分：

<a href="#about" id="aboutlink">
<h2><span>About</span></h2>
</a>

index.html 已经包含一个为内容格式化的 div，如下所示：

    <div class="lower">
        <div class="pagedrop" id="content">
<!-- Container to lazy-load content on a per page basis -->
        </div>
    </div>

这是一个外部文件的样例。这些外部文件只是块，不包含通常的 html/head/body 标签：

<div id="about">
        <h1>About</h1><img src="images/divider.png"/>
        <p><p:first-letter>Q</p:first-letter>uisque venenatis interdum purus, non sagittis turpis feugiat vel. Mauris accumsan luctus lacus, sed facilisis est vehicula eget. Etiam tempor lacus ac fermentum facilisis. Donec semper urna quis odio lobortis dignissim. Duis et metus non arcu venenatis dapibus ut sit amet enim. Nullam quis elit odio. Donec ultrices tincidunt nulla at vestibulum. Pellentesque risus ligula, mollis eget est nec, rhoncus ultricies nunc. Aenean scelerisque risus suscipit enim sollicitudin commodo.
        </p>
        </div>

简而言之：我想从“about.html”加载到框中的“index.html”

【问题讨论】：

你能创建一个 jsfiddle 吗？
@user2813683 我已经为您提供了答案，请告诉我是否适合您。
@user2813683 我已经用代码示例编辑了我的答案，您可能需要将它与 .live 一起使用。请看一看。

标签： jquery html ajax dynamic load

【解决方案1】：

查看 jquery 中的 .load() 函数。详情请参考 jquery API， http://api.jquery.com/load/

您应该能够从另一个 HTML 页面加载整个页面或某些 div/部分。

带有 .load 和 .live 的代码示例应该适用于 .live

$(document).ready(function () {
    $("a.view").live('click', function () {
        var id = $(this).data("id");
        $('#container').load("view.php?" + id,myCallback);
    });
});

引用自这里：How do I change dynamic page title while .load()

【讨论】：

是的，我以前使用过它，但我永远无法让它为此工作，因为它不会加载 (variable-name + ".html" )，只能使用固定的 "about. html" 这不是我在这种情况下需要的。

【解决方案2】：

您可以像这样使用 .pjax()：

<script type="text/javascript">
    $(document).pjax('a', '#pjax-container');
</script>

关于 this 链接的更多信息。也许它可以提供帮助！

【讨论】：