Question

我的网站顶部有一个导航栏，点击的每个类别都会向下滑动包含内容的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”

的框中

Answer 1

查看jquery中的.load（）函数。有关更多详细信息，请参阅jquery API， http://api.jquery.com/load/

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

使用.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()

Answer 2

您可以使用.pjax（），如：

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

有关 this 链接的更多信息。可以帮助您！

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

2 个答案: