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

Question

我有一个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>

JQ：

$(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 );
});

这工作正常... ish。

问题是这样的：使用初始（非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文件，因此您可以看到重复的问题。

如何避免这种情况？ 想到了一些诸如iframe之类的选项，但似乎可能是一个hack。

Answer 1

您的问题本质上是在'script1.php'中，您所需要的内容需要'connect.php'/填充的数据。 但是，当您插入DOM元素时，您的工作量就会增加一倍。

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

script1.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>

然后打电话

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

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