按照 jquery ui 选项卡中选项卡的链接答案

【问题标题】：Follow the links of the tab in jquery ui tab按照 jquery ui 选项卡中选项卡的链接
【发布时间】：2015-11-16 05:05:54
【问题描述】：

我有类似的 jquery 选项卡

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="http://www.google.com/">Name 3</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>

前两个选项卡加载各自的 div。但是第三个应该去google.com，而不是什么都不做。它只是添加了http://example.com/index.html#ui-tabs-[object Object] 到网址。

我正在开发一个 wordpress 插件，管理页面需要一个选项卡界面。我在本地服务器上对此进行了测试，但无法正常工作

更新：

我不想在页面内加载 google.com。它应该像普通链接一样在新标签/窗口中打开网页。

【问题讨论】：

为什么有一个标签可以打开一个新窗口....没有意义
@redsquare 无法理解问题？好好读题
我确实阅读了这个问题 - 然后你改变了它......

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

我也遇到了同样的问题。我通过为应该从外部加载的选项卡锚提供一个名为“followtablink”的类来解决它。然后我修改了我的 tabs() 调用：

$('.tabs').tabs({
select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    var className = ui.tab.className;

    if( className == "followtablink" ) {
        location.href = url;
        return false;
    }
    return true;
}});

每次选择选项卡时，它都会在遇到给定类时跟随链接。

注意：在 JQuery > 1.9.0 中使用 activate 而不是 select

【讨论】：

在 api 文档中看到了这一点，但它似乎并没有阻止选项卡最初通过 ajax 加载内容。有什么建议吗？

【解决方案2】：

我不确定你想要它做什么，但如果它应该打开链接作为当前页面的新页面/替换，文档解释说：

[如何...] ...跟随标签的 URL 而不是通过 ajax 加载其内容

请注意，在新标签页中打开标签页窗口是意外的，例如不一致的行为暴露了可用性问题 (http://www.useit.com/alertbox/tabs.html)。
$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

见http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

注意：在 JQuery > 1.9.0 中使用 activate 而不是 select

【讨论】：

“没用”是什么意思？有错误吗？它根本不起作用？请解释一下。
对我也不起作用。 ajax 内容最初仍会加载...并且选项卡链接的 href 更改为 ui-tabs-[object]

【解决方案3】：

当我看到生成的源代码时，

<li><a href="http://www.google.com/">Name 3</a></li>

改为

<li><a href="#ui-tabs-[object Object]">Name 3</a></li>

但其他列表相同。还是不知道是不是本地服务器测试的问题。

所以我尝试了这个选项。我删除了“href”属性并添加了一个名为“theLink”的类

<li><a class="theLink" target="_blank">Name 3</a></li>

然后我添加了以下jquery

$('.theLink).attr('href', 'http://www.google.com');

在此之后它像我一样工作。单击第三个选项卡时在新选项卡中加载 google.com

【讨论】：

【解决方案4】：

您不能，因为从 google.com 请求内容将是跨域调用，并且 xhr 调用将失败。

为什么不在第三个内容 div 中放置一个 iframe，并且 src 属性指向 google？

演示here

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="#tab-3">Google Tab</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>
<div id="tab-3">
    <iframe src="http://www.google.com"></iframe>
</div>

【讨论】：