使用jquery load()将内容添加到选项卡导航中

我有一个web应用程序，使用选项卡导航从UI工具包:http://www.getuikit.com/docs/tab.html。

每个选项卡将加载不同的内容，这些内容被分解成几个php脚本，每个选项卡一个。

一个(不是很有效，但对于成功来说)选项是在页面首次加载时加载所有选项卡内容，因此使用标准示例:

<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
 <li><a id="1" class="load-tab" href="">Tab 1</a></li>
 <li><a id="2" class="load-tab" href="">Tab 2</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><?php require('script1.php'); ?></li>
 <li><?php require('script2.php'); ?></li>
</ul> 

我想避免这种情况，因为脚本相当沉重，所以想要加载他们的需求，以获得更好的用户体验。

所以我所做的是，而是添加持有div和目标与jQuery load():

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><div id="1"></div></li>
 <li><div id="2"></div></li>
</ul>

金桥:

$(document).on("click", "a.load-tab", function(){
//get the value of the tab clicked in the nav
var tab = $(this).attr('id');
//determine the filename to load based on tab clicked
if (tab == '1'){ var filename = 'script1.php'; }
if (tab == '2'){ var filename = 'script2.php'; }
//load it
$( "#"+tab+ ).load( filename );
});

This works fine…伊什。

问题是:使用初始(非jquery)方法，每个脚本可以使用已经包含的主页的核心文件，例如header.php, functions.php等。但是，当从jquery加载内容时，似乎每个脚本都需要包含在scit1 .php文件中并再次加载，这导致在DOM中创建重复的内容。

编辑script1.php目前的结构如下:

 <?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 <table>
 //table content
 </table>

导航所在的页面，现在让我们称之为index.php，已经必须包含这些php文件，所以你可以看到重复的问题。

如何避免这种情况?想到了一些选项，如iframes，但似乎它可能是一个hack。