如何让 div 在点击时加载而不是在页面加载时加载？

Question

我目前正在建立一个新网站。 它使用一页并使用 jQuery 手风琴菜单来加载内容。 它的内容分为六个不同的 div，并且在访问页面后立即加载。 我希望它在单击链接时加载每个 div。 减少页面加载时间。

您可以在我正在进行的网站上看到这一点：http://is.gd/1p1Ys

因为我没有制作 jQuery 脚本，而且我不擅长 JavaScript/jQuery，所以我没有一个线索来做什么。 所以我想知道这里是否有人可以帮助我。

非常感谢，

瑞安

Answer 1

我同意 jquery-ui tabs 做这件事的其他答案，但是你可以很容易地破解你的 Accordian.js 文件...只需更改导航中的 href 以指向包含你想要的内容的外部 html 文件，即href="#lifestream" => href="lifestream.html"，

然后在 Accorian.js 中：

$links.click(function () {
  var link = this,
  if(!link.href.match(/^#.*/)) { //if the href doesn't start with '#'
    loadDiv(link.href);
  } else {
    doRestOfFunction(); //everything your script is currently doing.
  }
});

function loadDiv(href) {
  $.get(href, function(html) {
   var newDiv = $(html)
   $(".panels").append(newDiv);
   newDiv.hide();
   doRestOfFunction(); //same as above
  }
}

Answer 2

根据您的描述，听起来这些 div 在单击顶级菜单项之前不会显示。 如果是这种情况，您可以使用 jquery 在打开时将子菜单 div 插入到 DOM 中。

您可以在 w3schools 找到有关 Javascript/DOM 操作的不错的教程。

Answer 3

我不确定手风琴控件是您想要的 - 查看 JQuery 选项卡 - 您可以通过 Ajax 加载内容，这将阻止它们一次加载全部内容。 关于如何执行此操作的说明位于此处

Answer 4

如果您想动态加载内容，我建议您查看 jquery-ui 选项卡。 目前我还没有看到可以处理它的手风琴插件，这是有道理的，因为手风琴需要知道内容的高度，而且如果当您单击面板时您必须等待动态内容，它会显得生涩。 Tabs 是您前进的最佳且最合适的方式。