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

Question

我真的希望你能在这里帮助我。我正在制作一个 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 时，我是一个完全的新手，并且已经阅读并尝试了一百万个不同的代码片段，其中一些代码半工作，而大多数根本不起作用。我不知道这是否相关，但是网站页面上的 #container div 包含许多其他 div，所有这些 div 都包含不同类型的动态内容。

如果有人能帮助我，我将不胜感激！

谢谢

埃莉诺

Answer 1

你可以尝试做这样的事情。尽管没有看到它，但我不知道这与其他页面上的内容的配合效果如何

    $(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>

Answer 2

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

例如，一旦 ajax 完成，你就有一个用于 ajax 结果的占位符

<div "ajaxResults"> </div>

，你可以定位该 div 并绘制它，这样它就不会刷新完整的页面。

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

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