0

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

我想从外部文件动态加载内容（也就是说，当您单击导航栏中的“关于”时，它会向下滑动以将“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”框中

4

2 回答 2

2

查看 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()

于 2013-09-25T05:01:29.563 回答
0

你可以使用 .pjax() 像：

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

有关此链接的更多信息。可能会有所帮助！

于 2013-09-25T05:50:16.010 回答