如何从 jQuery UI 选项卡里面打开一个链接说选项卡答案

【问题标题】：How to open a link from within jQuery UI Tabs INSIDE said tab如何从 jQuery UI 选项卡里面打开一个链接说选项卡
【发布时间】：2011-05-05 22:47:10
【问题描述】：

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

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

例如：

我有 3 个标签：

管理员 (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 页面（无页面重定向）

【问题讨论】：

我不太确定您所说的“（但将原始标签留在后台）”是什么意思。在示例中，add.php 是否替换了成员选项卡的内容，在其下方追加或其他内容？
把sample放到jsfiddle上，这很难想象。
@Eric - 我会尝试将一些东西放在一起，尽管这很难想象，因为我无法在网上找到类似的东西。我会尽快通知你
@Eric & @kingjiv - 添加了 jsbin 编辑

标签： jquery tabs jquery-ui-tabs

【解决方案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 来容纳页面。它获取链接所在的div 的ID，然后将div 的内容替换为iframe。

See it working here

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

运行代码时遇到什么错误？

【讨论】：