2

所以我有一些 jQuery UI 选项卡。源代码如下：

HTML：

<div class="tabs">
    <ul>
        <li><a href="#ranges">Ranges</a></li>
        <li><a href="#collections">Collections</a></li>
        <li><a href="#designs">Designs</a></li>
    </ul>
    <div id="ranges"></div>
    <div id="collections"></div>
    <div id="designs"></div>
</div>

jQuery：

$(document).ready(function() {
    $(".tabs").tabs();
});

我的问题是我试图让每个选项卡在单击相关链接时将一个页面加载到内容面板中。首先，我只是想在单击链接时设置所有面板的 html。从下面的代码中，如果我使用方法 1，它适用于所有链接。但是，如果我使用方法 2，它不会 -仅适用于选项卡中的链接（即您单击以选择选项卡的标签）。

方法1（一直适用于所有链接，但不适用于调用此方法后添加的链接）：

$("a").click(function () {
    $("#ranges, #collections, #designs").html("clicked");
});

方法 2（适用于所有未“tabified”的链接）：

$("a").live("click", function () {
    $("#ranges, #collections, #designs").html("clicked");
});

有谁知道它为什么会这样？我真的很想让方法 2 正常工作，因为我可能需要添加点击事件的链接，这些链接是在页面最初加载后添加的。

提前致谢，

理查德

PS是的，该功能要求.live并且.click都在该$(document).ready()功能中，在有人说这可能是问题之前-否则它根本不起作用..

编辑：

我想出的解决方案涉及锚点（data-url）中的一个额外属性和以下代码（如果无法加载页面，则会输出 404 not found 错误）。我的目标是在接下来的几周/几个月内扩展它，使其变得更强大。

$(".tabs").tabs({
    select: function (event, ui) {
       $(ui.panel).load($(ui.tab).attr("data-url"), function (responseText, textStatus, XMLHttpRequest) {
           switch (XMLHttpRequest.status) {
               case 200: break;
               case 404:
                   $(ui.panel).html("<p>The requested page (" + $(ui.tab).attr("data-url") + ") could not be found.</p>");
                   break;
               default:
                   $(ui.panel).html("<p title='Status: " + XMLHttpRequest.status + "; " + XMLHttpRequest.statusText + "'>An unknown error has occurred.</p>");
                   break;
           };
       });
   }
});
4

3 回答 3

1

jQuery UI 选项卡在return false;使用event.preventDefault();. 这有效地防止了 live 依赖的事件冒泡。这计划在jQuery UI 1.9中修复，但同时最好的方法是使用 @rolfwaffle 建议的内置选择事件。

于 2011-12-15T14:49:39.777 回答
1

我不知道我是否理解您的目的，但基本上您想在单击选项卡后执行某些操作？ 这是设置用于选择选项卡的回调函数的文档。

编辑：不知道该链接是否正常工作，您想select在事件下查看。但基本上是：

$("#tabs").tabs({
    select: function(event, ui) { ... }
});

ui单击的选项卡上的信息在哪里。

于 2011-01-28T06:36:21.070 回答
-1

也许您正在使用的 tabs() 插件在创建它的选项卡后正在调用event.preventDefault(); (Reference) 。

然后它捕获点击事件并停止冒泡，因此它不会调用您的点击功能。在 jQuery 中，这是通过

$(element).click(function(){
    // Do stuff, then
    return false; // Cancels the event
});

您必须更改 tabs() 插件代码并删除此 return false; 声明，或者如果你很幸运，插件可能有一个选项来禁用该行为。

编辑：现在我看到您正在使用 jQuery UI。然后你应该检查那里的文档，因为它是一个很棒的插件，如果你正确地执行 html 并传递正确的选项，它会做任何你想做的事情。

于 2011-01-28T06:36:36.443 回答