Question

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

您可以在我的工作进展网站上看到此操作： http://is.gd/1p1Ys

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

非常感谢，

赖安

Answer 1

我同意jquery-ui标签完成这个问题的其他答案，但你可以很容易地破解你的accordian.js文件...只需更改导航中的hrefs指向包含你内容的外部html文件想要，即href =“＃lifestream”=＆gt; 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
  }
}

Answer 2

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

您可以在w3schools找到关于Javascript / DOM操作的体面教程。

Answer 3

我不确定手风琴控制是你所追求的 - 检查JQuery tabs - 你可以通过Ajax加载内容，这将阻止他们一次加载。有关如何执行此操作的说明是here

Answer 4

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

当页面加载时，如何在点击时加载div？

4 个答案: