UI选项卡在外部页面加载外部页面（2级）

发布于 2024-08-19 09:08:50 字数 2173 浏览 3 评论 0原文

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

所以，我有 3 html页面： - 索引.html - 外部1.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 加载到定义的 DIV“内容”中外部1.html。

我的页面如下所示：

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 加载 external1 并将 external1A 加载到 external1 http://www 的 DIV 中。 digi-d-sign.nl/external.into.external.png

通常我会尝试保持页面级别平坦，但在这种情况下我必须朝这个方向加载它。

你知道 jQuery 是什么样子吗？

非常感谢！

原文

I'm try to load an external page 1 into a ui-tab (this is not the hard part), but next i want to load automatically a 2nd-level page into a DIV of page 1.

So, i've got 3 html pages:
- index.html
- external1.html
- external1A.html

The index.html jQuery will load external1.html into the div 'tabcontent' and then load external1A.html into a div 'content' defined into external1.html (all jQueries should defined in the main index.html).

When you click at the links defined in external1.html, an other external1B.html will get loaded into the DIV 'content' defined in external1.html.
When i load tab-2, i will load external2.html and so on...

So, load index.html and load the first tab content (external1.html), and next load external1A.html into DIV 'content' defined in external1.html.

My pages looks like:

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>

Finally it should looks like the next image:
Tab loads external1 and loads external1A into DIV of external1 http://www.digi-d-sign.nl/external.into.external.png

Normally i try to keep the page levels flat, but in this case i have to load it in this direction.

Do you have an idea how the jQuery looks like?

Many thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

樱花落人离去 2024-08-26 09:08:50

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

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

$('#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 新手来说也是如此！

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 !

回复收藏 0 原文

~没有更多了~

关于作者

木槿暧夏七纪年

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

UI选项卡在外部页面加载外部页面（2级）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

UI选项卡在外部页面加载外部页面（2级）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。