如何让 div 在点击时加载而不是在页面加载时加载？ [关闭]答案

【问题标题】：How to get div's to load on click not when page loads? [closed]如何让 div 在点击时加载而不是在页面加载时加载？ [关闭]
【发布时间】：2009-07-06 18:09:23
【问题描述】：

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

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

由于我没有制作 jQuery 脚本，而且我的 JavaScript/jQuery 非常糟糕，我不知道该怎么做。所以我想知道这里是否有人可以帮助我。

非常感谢，

瑞恩

【问题讨论】：

检查简单的jQuery解决方案jsfiddle.net/UPPnL/1

标签： javascript jquery html css accordion

【解决方案1】：

我同意 jquery-ui 选项卡执行此操作的其他答案，但是您可以很容易地破解您的accordian.js 文件...只需更改导航中的 href 以指向包含您的内容的外部 html 文件想要，即 href="#lifestream" => href="lifestream.html",

然后在accordian.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
  }
}

【讨论】：

谢谢，你知道在accordian.js 中添加这个吗？抱歉，如果问得太多了，但我在过去的 10 分钟里一直在摆弄，我所能做的就是在主页上显示所有 div。谢谢。
1.从您的页面中删除所有 div。 2. 将它们放在自己的 .html 文件中 3. 将导航中的 href 更改为指向 lifestream.html 等 4. 创建两个函数 -> loadDiv() 和 showDiv() 5. loadDiv() => 同上 6. showDiv() => 您的 $links.click() 函数当前正在执行的所有操作。 7.改变doRestOfFunction() => showDiv()
感谢所有帮助，但仍然无法正常工作 =S
抱歉，比我想象的要复杂...我真的不明白你在做什么。我想我不能给出一个简单的答案。
好的，谢谢大家的帮助:)

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我不确定手风琴控件是否是您所追求的 - 查看JQuery tabs - 您可以通过 Ajax 加载内容，这将阻止它们一次全部加载。如何做到这一点的解释是here

【讨论】：

【解决方案4】：

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

【讨论】：