Question

我正在进行以下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();
            });
        }
    });     
});

这会加载标签ok：

<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

我该如何解决这个问题？

Answer 1

以下是发生的事情：当您在属性映射中启用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);
});

完成:)运行tab插件后执行此函数，.ui-tabs-panel.ui-widget-content内的所有链接元素将强制自己的选项卡用自己的href重新加载

jQuery选项卡 - 在选项卡内打开分页链接

1 个答案: