将页面中的所有内容和脚本加载到另一个页面中

Question

如果您访问我们网站上的此页面： http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-divemaster-training.html

底部的按钮显示“初学者”“开放水域潜水员”等...... 他们会将您带到另一个页面，您可以在该页面上进行一系列选择并进行预订。

我们希望它不必导航到另一个页面，而是加载这些选项以及在第一页的 div 中进行计算的所有脚本。根据您按下的按钮取决于它将在 div 中加载的页面。

IFrame 不起作用，因为它不会在打开可折叠面板时动态调整大小。动态驱动器上的 AJAX 脚本。 http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm 不起作用，因为任何可折叠面板都不起作用，计算脚本也不起作用。

如何做到这一点。总而言之，这就像将页面底部的按钮变成选项卡，以显示这些按钮当前链接到的页面中的内容。

这可能吗？

Answer 1

使用Jquery，通过$.get()方法获取数据并使用该数据做$('#myDiv').html(data);

例如：

HTML

<a href="#" id="getData">Get data</a>
<div id="myContainer"></div>

JS

$('#getData').click(function(){
    $.get('data.php', { section: 'mySection' }, function(data){
       $('#myContainer').html(data);
    });
});

PHP：

<?php
    if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>

这是最简单的方法。如果您需要有关$.get() 和/或.html() 的任何帮助，请查看此处：

• http://api.jquery.com/jQuery.get/
• http://api.jquery.com/html/