UI Tab 在外部页面中加载外部页面（2 级）答案

【问题标题】：UI Tab load external page in external page (2 levels)UI Tab 在外部页面中加载外部页面（2 级）
【发布时间】：2010-01-29 10:01:10
【问题描述】：

我正在尝试将外部页面 1 加载到 ui-tab 中（这不是困难的部分），但接下来我想将第二级页面自动加载到页面 1 的 DIV 中。

所以，我有 3 个 html 页面： - index.html - external1.html - external1A.html

index.html jQuery 会将 external1.html 加载到 div 'tabcontent' 中，然后将 external1A.html 加载到定义在 external1.html 中的 div 'content' 中（所有 jQueries 都应该在主 index.html 中定义）。

当您单击 external1.html 中定义的链接时，另一个 external1B.html 将加载到 external1.html 中定义的 DIV“内容”中。当我加载 tab-2 时，我会加载 external2.html 等等...

因此，加载 index.html 并加载第一个选项卡内容 (external1.html)，然后将 external1A.html 加载到 external1.html 中定义的 DIV“内容”中。

我的页面如下所示：

index.html

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="js/myscripts.js" type="text/javascript"></script>
</head>
<body>
    <div id="tabs">
        <ul class="ui-tabs-content">
            <li><a href="external1.html" title="tabcontent"><span>external  1</span></a></li>
            <li><a href="external2.html" title="tabcontent"><span>external  2</span></a></li>
        </ul>
    </div>

    <div id="tabcontent"></div>

</div>
</body>
</html>

external1.html

<div class="menu">
    <a href="#" id="external1A">external 1A</a> | 
    <a href="#" id="external1B">external 1B</a> | 
    <a href="#" id="external1C">external 1C</a>
</div>

<div class="content"></div>

external1B.html

<form name="form1">
    <input type="text" value="" name="name="">
    <input type="submit" value="submit" name="Submit">
</form>

最后它应该看起来像下一张图片： Tab loads external1 and loads external1A into DIV of external1 http://www.digi-d-sign.nl/external.into.external.png

通常我会尽量保持页面水平，但在这种情况下我必须在这个方向加载它。

你知道 jQuery 的样子吗？

非常感谢！

【问题讨论】：

标签： load external jquery-ui-tabs

【解决方案1】：

好的，在我阅读了更多文档之后，它变得清晰了，我找到了解决方案：

自动加载选项卡时，您可以将更多事件放入加载选项卡后应该运行的加载...

$('#tabs').tabs({
    load: function(event, ui) {
        $('.content').load('external1A.html');
    }
});

单击 external1.html 中的链接会将另一个 html 加载到 external1.html 中定义的 div“内容”中：

$("#external1A").live('click', function() {
    $('.content').load('external1A.html');
});

就是这样。从未想过这会如此简单，即使对于 jQuery 新手来说也是如此！

【讨论】：