在div标签内加载HTML

时间:2011-01-19 13:25:26

标签: javascript jquery jquery-plugins

我正在制作幻灯片系统,以显示之前的&明显的工作的下一个按钮。然而幻灯片将是单独的html文件,如slide1.html,slide2.html。 Thickbox和其他插件在其中异步加载html。这样做的最佳方法是什么。我正在为整个过程编写一个jQuery插件。

我很喜欢来自JavaScript经验丰富的人的想法。

提前多多感谢。感谢所有帮助。

1 个答案:

答案 0 :(得分:6)

不完全确定你在问什么。使用load

将HTML代码段加载到div中很容易
$("selector_for_the_div").load("your_url");

示例(live copy)

jQuery(function($) {

  var currentSlide = 0;
  var slides = [
    "http://jsbin.com/enuju4/",
    "http://jsbin.com/enuju4/2",
    "http://jsbin.com/enuju4/3"
    ];

  loadSlide(0);

  $("#btnNext").click(function() {
    loadSlide(currentSlide + 1);
  });

  $("#btnPrev").click(function() {
    loadSlide(currentSlide - 1);
  });

  function loadSlide(index) {
    if (index >= 0 && index < slides.length) {
      currentSlide = index;
      $('#slideHolder').load(slides[currentSlide]);
    }
  }

});

您可以缓存幻灯片,或者只依赖浏览器的缓存。按钮启用/禁用等显然会很好......