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

I am currently building an making my new website. It uses one page and uses a jQuery accordian menu to load the content. The content it split up in six different div's and all load as soon as the page is accessed. I want it to load each div when the link to it is clicked on. To decrease the page loading time.

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

You can see this in action on my work in progress site here: http://is.gd/1p1Ys

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

Since I didn't make the jQuery script and I am really bad at JavaScript/jQuery I don't have a clue what to do. So I am wondering if anybody here can help me out.

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

Thanks a ton,

万分感谢,

Ryan

4 个解决方案

#1

I agree with the other answers that jquery-ui tabs does this exact thing, but you can hack your accordian.js file pretty easily... just change the hrefs in your navigation to point to external html files containing the content you want, i.e. href="#lifestream" => href="lifestream.html",

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

and then in accordian.js:

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

#2

From your description, it sounds like these divs are not displayed until the top-level menu item is clicked. If this is the case, you can use jquery to insert the sub-menu divs into the DOM when it is opened.

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

You can find a decent tutorial on Javascript/DOM Manipulation at w3schools.

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

#3

I'm not sure the accordion control is what you are after - check out JQuery tabs - you can load the content via Ajax which will prevent them loading all at once. An explanation of how to do this is here

我不确定手风琴控制是你所追求的 - 检查JQuery选项卡 - 你可以通过Ajax加载内容,这将阻止他们一次加载。这里是如何做到这一点的解释

#4

I would suggest looking at jquery-ui tabs if you want to load the content in dynamically. Currently I have not seen an accordian plugin that will handle it, which makes sense as an accordian needs to know the height of the content, also if when you clicked a panel you had to wait for dynamic content it would appear jerky. Tabs is your best and most appropriate way to move forward.

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

#1