Jquery/Ajax 问题 - 将一个页面上的 div 的内容加载到主页上的 div 中答案

【问题标题】：Jquery/Ajax question - loading the content of a div on one page into a div on home pageJquery/Ajax 问题 - 将一个页面上的 div 的内容加载到主页上的 div 中
【发布时间】：2011-08-21 04:28:00
【问题描述】：

我真的希望你能在这里帮助我。我正在制作一个 wordpress 网站，有 6 页 + 主页。这 6 个页面的内容包含在一个名为 #container 的 div 中。内容包括图片幻灯片等，都使用各种代码来正确操作和运行。

在首页，我有一个基于图像的导航菜单，我已通过 html 叶将其插入到标题内的小部件中。代码如下：

<ul id="navlist">
   <li id="webdesign"><a href="http://mysite.com/web-design/"></a></li>
   <li id="branding"><a href="http://mysite.com/branding/"></a></li>
   <li id="architecture"><a href="http://mysite.com/architecture/"></a></li>
   <li id="writing"><a href="http://mysite.com/writing/"></a></li>
   <li id="blog"><a href="http://mysite.com/blog/"></a></li>
   <li id="contact"><a href="http://mysite.com/contact/"></a></li>
</ul>

我想要做的是每次点击这 6 个链接中的一个，而不是加载整个页面，我只想将 div #container 的内容从该特定页面加载到主页上的 div #container页面，甚至只是加载并保留该 div 中的所有丰富内容。

当谈到 jquery/ajax 时，我是一个完全的新手，并且已经阅读并尝试了一百万种不同的 sn-ps 代码，其中一些工作一半，而大多数根本不起作用。我不知道这是否相关，但网站页面上的#container div 包含许多其他 div，它们都包含不同类型的动态内容。

如果有人可以帮助我，我将非常感激！！！

谢谢

埃莉诺

【问题讨论】：

我解释过你在找什么吗？？？

标签： jquery ajax wordpress html formatting

【解决方案1】：

@eleanonr，你总是可以为你的元素设置一个占位符，最后说 .html

例如，您有一个 ajax 结果的占位符

<div "ajaxResults"> </div>

一旦 ajax 完成，您可以定位该 div 并绘制它，这样它就不会刷新整个页面。

$.ajax({
  url: "test.html"
  success: function(results){
   $("#ajaxResults").html(results);
  }
});

如果您需要任何进一步的帮助，请告诉我

【讨论】：

【解决方案2】：

你可以尝试做这样的事情。我不知道这将如何与其他页面上的内容一起使用，尽管没有看到它

    $(function () {

        //Stop caching if page is likely to change often
        $.ajaxSetup({
            cache: false
        });

        $('#navlist a').click(function (evt) {
           //Grab url from link
           var url = $(this).attr('href'); 
           //This will load the entire page but only select the #container 
           $('#container').load(url +' #container'); 
           evt.preventDefault(); //Stop yourself from navigating to that page
        });

    });

   <ul id="navlist">
      <li id="webdesign"><a href="Secondary.aspx">webdesign</a></li>
   </ul>

   <div id="container"></div>

【讨论】：