Javascript 使用jquery load（）将内容添加到选项卡式导航中

我有一个web应用程序，它使用UI工具包中的选项卡式导航：

每个选项卡将加载不同的内容，这些内容被分解为几个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> 

jq:

这个很好用。。。伊什

问题是：使用初始（非jquery）方法，每个脚本都可以使用已经包含的主页核心文件，例如header.php、functions.php等。但是当从jquery加载内容时，似乎每个脚本都需要包含在scipt1.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这样的选项，但似乎这可能是一个黑客

您的问题本质上在“script1.php”中，您有一些东西需要“connect.php”/填充的数据。但是当你把DOM元素拉进来的时候，你的DOM元素就加倍了

解决这个问题的两个解决方案是：1-创建不包含任何DOM元素的lib php文件的精简版本，只包含填充script1.php数据所需的数据，或者

php包含

<?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 //Everything inside #content is what you want to pull in
 <div id="content">
     <table>
     //table content
     </table>
 </div>

---

这将只加载#content div中的HTML。

您的script1.php是什么样子的？如果您想包含这些核心文件，那么第一种方法就是最好的方法。尽管您可以在dom中隐藏一些数据，并在需要时通过jquery进行访问。那是另一种方式。但不建议这样做，尤其是当它不仅是您需要的数据，而且是您需要的其他文件中的函数和方法时。我只想要你原来的菜单。“在页面加载时直接将它们加载到Themenu中。@杰米·威尔逊刚刚编辑了我的文章。Thanks@KyleK，不是一个选项。我选择选项卡式导航的全部原因是，我不必一次加载8个选项卡。它给用户带来了太多的延迟。谢谢@jamie wilson，它看起来很简单，但你做到了。php是唯一一个包含DOM元素的文件，例如，它证明了它是不需要的！有时候，你必须经历漫长的过程才能理清思路。

 <?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>

<?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 //Everything inside #content is what you want to pull in
 <div id="content">
     <table>
     //table content
     </table>
 </div>

$("#1").load("script1.php #content");