Question

我有像

这样的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。它应该像普通链接一样在新标签/窗口中打开网页。

Answer 1

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

[如何...] ...按照标签的网址而不是   通过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＆gt; 1.9.0使用激活而不是选择

Answer 2

我遇到了同样的问题。我通过给应该在外部加载一个名为“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＆gt; 1.9.0使用激活而不是选择

Answer 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

Answer 4

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

为什么不将iframe放在第三个内容div中，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>

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

4 个答案: