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中创建重复的内容。

EDIT 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这样的一些选项，但似乎可能是一个黑客。

Answer 1

您的问题基本上在'script1.php'内部，您需要填充“connect.php”/数据。但是当你把它拉进来时，你正在加倍使用DOM元素。

该问题的两个解决方案是：1 - 创建不包含任何DOM元素的lib php文件的更薄版本，仅填充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。

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

1 个答案: