2

我正在创建一个站点，只有一个信息容器。当用户单击左侧的特定按钮时，容器的内容将切换。但是，此时该站点将加载每个内容部分。其中一个包含我的作品集，它（将是）一个大图像集，它会阻止网站快速加载。

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

有关我要实现的目标的快速示例：
访问http://iscs.nl/testpage_changecontent.html

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

谢谢大家，期待代码。

4

3 回答 3

3

假设投资组合内容在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();
});
于 2013-09-25T13:25:32.747 回答
1

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

  1. 将两个包含内容（没有布局）的文件放到您的服务器上。例如 content1.html 和 content2.html

  2. 用这个替换你现有的 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();
});

  3. 最后，将 id 为“content_1”和“content_2”的 div 替换为 id="content" 的单个 div：

    <div id="content">The text displayed until the user clicks any link</div>

此致。

于 2013-09-25T13:35:17.463 回答
1

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

于 2013-09-25T13:21:45.197 回答