0

我有以下 jQuery UI 选项卡设置：

$(function() {
    $('#tabs').tabs({
        ajaxOptions: {
            type:'post',
            async: false,
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab." );
            }
        },
        load: function(event, ui) {
            $(ui.panel).delegate('a', 'click', function(event) {
                $(ui.panel).load(this.href);
                event.preventDefault();
            });
        }
    });     
});

这可以加载标签：

<div id="tabs">
        <ul>
          <li><a href="div-s.php">Summary</a></li>
          <li><a href="content.php?div=Production">Products</a></li>
          <li><a href="content.php?div=Digital">Recordings</a></li>
          <li><a href="login.php">Login</a></li>
          <li><a href="resources.html">Resources</a></li>
        </ul>
    </div>

我的第一个标签div-s.php包含分页。我希望在同一个选项卡中打开分页链接，但是当我点击它们时，浏览器实际上将我重定向到div-s.php?pagenum=2

请问我该如何解决？

4

1 回答 1

3

ajaxOptions这是发生的事情：当您在属性映射中启用时，jquery.tab 插件会“关闭”您的选项卡链接。

因此，当您单击某个选项卡时，内容将由 AJAX 请求加载并插入到选项卡面板中。如果您不向它们添加事件侦听器或任何类型的脚本，则选项卡内容中的所有 HTML 元素都将像普通元素一样工作。然后，当您加载具有分页链接的内容并单击其中一个时，您将单击重新加载所有页面的普通链接，因为您的选项卡面板不是内框。

解决方案：

您在load属性中设置的功能什么都不做，但只需稍作修改即可强制在选项卡面板内的链接中加载 ajax :)

$(".ui-tabs-panel.ui-widget-content").delegate('a', 'click', function(event) {
  event.preventDefault();
  $(this).closest('.ui-tabs-panel.ui-widget-content').load(this.href);
});

完成:) 运行标签插件后执行此功能，所有链接元素.ui-tabs-panel.ui-widget-content将强制他们自己的标签重新加载自己的href

于 2012-06-14T15:32:54.607 回答