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，都包含不同类型的动态内容。

如果有人能帮助我，我将非常感激!!!

由于

埃莉诺

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结果的占位符

<div "ajaxResults"> </div>

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

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

如果您需要任何帮助，请告诉我

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

2 个答案: