2

我正在尝试将外部页面 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“内容”中。

我的页面看起来像：

索引.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>

外部1.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>

外部1B.html

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

最后它应该看起来像下一张图片： Tab 加载 external1 并将 external1A 加载到 external1 的 DIV http://www.digi-d-sign.nl/external.into.external.png

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

你知道 jQuery 的样子吗？

非常感谢！

4

1 回答 1

1

Ok, after i read some more documentation, it was getting clear and i found the solution:

When loading the tab automatically, you can put more events into the load that should run after the tab has loaded...

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

And a click on the links in the external1.html will load an other html into a div 'content' defined in external1.html:

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

Thats it. Never thought this was so easy, even for a jQuery newbie !

于 2010-01-29T02:01:10.543 回答