Question

我正在创建一个页面，只有一个信息容器。当用户单击左侧的特定按钮时，容器的内容将切换。但是，此时网站将加载每个内容部分。其中一个包含我的投资组合，其中（将是）一个大型图像集合，可以阻止网站快速加载。

因此，在点击显示该div内容的按钮之前，我不想制作特定加载的内容。

快速举例说明我正在努力实现的目标：
访问http://iscs.nl/testpage_changecontent.html

不应该在开始时加载的div的内容是#page_portfolio 单击#pagebutton_portfolio按钮即可显示注意：上述链接的测试页上未使用这些ID。

谢谢大家，看看代码。

Answer 1

假设投资组合内容位于portfolio.html：

$('#tabcontent2').click(function(e){
  $('#content_1').hide();
  $("#content_2").show()
    // grab portoflio.html and place its contents within #content_2
    .load('portfolio.html');
  e.preventDefault();
});

您甚至可能希望使用data-*属性，因此您不会重新加载页面（获取一次）：

$('#tabcontent1').click(function(e){
  $('#content_2').hide();
  $('#content_1').show();
  e.preventDefault();
});
$('#tabcontent2').click(function(e){
  $('#content_1').hide();

  var $content2 = $("#content_2").show();

  // check if it's been loaded before
  if (!($('#content_2').data('loaded') || false)){
    // grab portoflio.html and place its contents within #content_2
    $content2.load('portfolio.html', function(){
      // set the flag to say we've already loaded this content
      $content2.data('loaded',true);
    });
  }
  e.preventDefault();
});

Answer 2

使用ajax加载内容。你将需要一个php文件，但只有在触发js事件时才会执行。

Answer 3

这是一个专门为您准备的简单决定。

将包含内容（无布局）的两个文件放入您的服务器。例如，content1.html和content2.html

用以下代码替换现有的JS代码：

function replace(content) {
    $('#content').html(content);
    $('#content').show();
}

$('#tabbutton1').click(function() {
    $.get("content1.html", replace(content));
    $('#content').hide();
});

$('#tabbutton2').click(function() {
    $.get("content2.html", replace(content));
    $('#content').hide();
});

最后，将ID为“content_1”和“content_2”的div替换为id为“content”的单个div：
```
<div id="content">The text displayed until the user clicks any link</div>
```

最好的问候。

在点击按钮之前不要加载部分html

3 个答案: