如何从jQuery UI选项卡中打开链接INSIDE所说的选项卡 [英] How to open a link from within jQuery UI Tabs INSIDE said tab

问题描述

首先，我查看了 此问题 ，这不是一个相同的问题.

To start, I have viewed this question and it is not the same issue.

最终，我试图允许一个带有打开的选项卡的链接，单击该链接将获取相应的URL，并在原始选项卡空间的内容中显示该URL(但将原始选项卡保留在后台).

Ultimately, I am trying to allow a link with an opened tab, which once clicked fetches the appropriate URL and displays that URL within the contents of the original tabbed space (but leaving original tabs in the background).

例如:

我有3个标签:

1. 管理员(admin.php)
2. 成员(members.php)
3. 统计信息(stats.php)

当我打开成员"选项卡时，还有2个附加链接:

When I open the Members tab, there are 2 additional links:

1. 添加成员(add.php)
2. 删除成员(delete.php)

无论我选择单击一个还是另一个，add.php或delete.php的内容都与其父级(members.php)

Whether I choose to click one or the other, the contents of add.php or delete.php appear in the same tabbed space as its parent (members.php)

我遇到了jquery文档，但似乎无法正确访问.

I came across the jquery documentation but doesn't seem to be accessing correctly.

当前，我的jquery代码是:

Currently, my jquery code is:

<script type="text/javascript">
$(function() {  
    $( "#tabs" ).tabs({
        spinner: '<img src="../images/loader.gif" />',
        select: function(event, ui) {
            var tabID = "#ui-tabs-" + (ui.index + 1);
            $(tabID).html("<b>Fetching Data.... Please wait....</b>");
        },
        cache:false,
        load: function(event, ui) {
                $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
        },
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Error: Could not retrieve information." );
            }
        }
    });
</script>

编辑

我添加了一个jsbin文件以显示选项卡式格式.

EDIT

I have added a jsbin file to show a tabbed format.

http://jsbin.com/apidi6/edit

我基本上希望能够单击第一个标签中的ebay.com链接，并在常规信息"标签中包含完整的html页面加载(无页面重定向)

I want to essentially be able to click the ebay.com link within the first tab and have a full blown html page load INSIDE of the content of the General Information tab (no page redirect)

推荐答案

如果我对您的理解是正确的，那么它应该做您想要的，但是您需要稍微更改一下代码:

If I understand you correctly this should do what you want but you will need to change your code a little:

$('a.tabLink').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var page = '<iframe src="'+href+'" width="100%" height="100%"></iframe>';
    var id = $(this).closest("div").attr("id");
    $('#'+id).html(page);
});

您需要确保标签中的任何链接都添加了一个类:

You will need to make sure any link within the tab has a class added to it:

<a href="http://www.ebay.com" class="tabLink">

现在发生的是，您单击类为tabLink的链接，jQuery阻止浏览器跟踪该链接.它获取链接的地址.它会构建一个iframe来容纳该页面.它获取链接所在的div的ID，然后用iframe替换div的内容.

Now what happens is, you click a link with the class tabLink, the jQuery prevents the browser from following the link. It grabs the address of the link. It builds an iframe to house the page. It gets the ID of the div which the link is in, then it replaces contents of the div with the iframe.

在此处查看其工作

使用iframe的原因是JavaScript不允许您从其他域中加载数据，前提是只要链接位于您的Ajax请求应该能够加载页面，我发布的代码将允许您加载外部页面.

The reason for using an iframe is javascript wont allow you to load data from a different domain, having said that, looking at the code you posted, as long as your links are within the same domain your ajax request should be able to load the page, the code I have posted will allow you to load external pages.

运行代码时会遇到什么错误?

What error do you get when you run your code?

这篇关于如何从jQuery UI选项卡中打开链接INSIDE所说的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！