Question

首先，我查看了this question，这不是同一个问题。

最终，我尝试允许链接打开的标签，该标签一旦点击就会抓取相应的网址并在原始标签空间的内容中显示该网址（但在后台保留原始标签）

例如：

我有3个标签：

Admin（admin.php）
会员（members.php）
统计（stats.php）

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

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

无论我选择点击其中一个，add.php或delete.php的内容都显示在与其父（members.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>

修改

我添加了一个jsbin文件来显示标签格式。

http://jsbin.com/apidi6/edit

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

Answer 1

如果我理解正确，这应该做你想要的，但你需要稍微改变你的代码：

$('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的{{1}}，然后将div的内容替换为div。

See it working here

使用iframe的原因是javascript不允许您从其他域加载数据，只要您的链接在您的ajax请求所在的域内，就会看到您发布的代码应该能够加载页面，我发布的代码将允许您加载外部页面。

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

如何从jQuery UI选项卡中打开一个链接INSIDE表示选项卡

修改

1 个答案: