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

【问题标题】：jQuery tabs - opening pagination links inside a tabjQuery选项卡 - 在选项卡内打开分页链接
【发布时间】：2012-06-11 09:25:50
【问题描述】：

我有以下 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

请问我该如何解决？

【问题讨论】：

这真的很复杂吗？可能是我采取了错误的方法？..
将您的代码粘贴到选项卡中...选项卡中的代码将无法用作选项卡。我的意思是，tab 插件将为a 中的a 设置选项卡在您的div#tabs 中，但为每个选项卡加载的内容将作为“简单 HTML”工作。所以，如果你有一个链接，比如你的分页链接，它将作为一个普通链接使用
好的，我明天试试……但这不会让我的索引页超载吗？
事实上...您在标签内容中的链接不会重新加载您的标签（您的标签不是 iframe）...标签插件将“关闭”具有该功能的标签的链接在插件的load 属性中设置
@Rafael Verger 这行得通！谢谢 - 发表你的答案，我会接受并给你 100 分......

标签： jquery user-interface tabs

【解决方案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);
});

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

【讨论】：