如何从 jQuery UI 选项卡内部打开链接

首先，我查看了这个问题 https://stackoverflow.com/questions/1659852/jquery-ui-tabs-open-link-inside-tab-via-ajax这不是同一个问题。

最终，我试图允许带有打开的选项卡的链接，一旦单击该链接，就会获取适当的 URL 并在原始选项卡式空间的内容中显示该 URL（但在后台保留原始选项卡）.

例如：

我有 3 个标签：

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

当我打开“会员”选项卡时，有 2 个附加链接：

1. 添加会员（add.php）
2. 删除会员（delete.php）

无论我选择点击其中之一，add.php or delete.php与其父级出现在同一选项卡式空间中（成员.php）

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

目前，我的 jquery 代码是：

<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>

EDIT

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

http://jsbin.com/apidi6/edit http://jsbin.com/apidi6/edit

我希望基本上能够单击第一个选项卡中的 ebay.com 链接，并在“常规信息”选项卡的内容内加载完整的 html 页面（无页面重定向）

如果我理解正确的话，这应该可以满足您的要求，但是您需要稍微更改一下代码：

$('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);
});

您需要确保选项卡中的任何链接都添加了一个类：

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

现在发生的事情是，您单击班级的链接tabLink，jQuery 阻止浏览器跟踪该链接。它获取链接的地址。它构建了一个iframe容纳页面。它得到ID of the div链接所在的内容，然后它会替换div与iframe.

在这里查看它的工作情况 http://jsbin.com/apidi6/4

使用的原因iframejavascript 是否不允许您从不同的域加载数据，话虽如此，查看您发布的代码，只要您的链接位于您的 ajax 请求的同一域内should能够加载页面，我发布的代码将允许您加载外部页面。

运行代码时出现什么错误？