javascript - 使用 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 );
});

这很好用……是的。

问题是这样的:使用初始(非 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。