Jquery UI - 重新加载选定的选项卡？答案

【问题标题】：Jquery UI - reload selected tab?Jquery UI - 重新加载选定的选项卡？
【发布时间】：2010-08-06 19:42:31
【问题描述】：

有没有办法重新加载选定的选项卡我知道有 .load() 功能。但它需要一个标签索引，我似乎没有看到获取所选标签 ID 的方法。

【问题讨论】：

那么你的问题真的是如何获取所选标签的索引？
那会解决我的问题，是的。

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

更新：在 jQuery 1.9 中，selected 选项被重命名为 active。见attomman's answer.

要获取当前选定的索引，请使用tabs('option','selected') 函数。

例如，如果您有一个按钮#button（并且#tabs 元素被制成选项卡），您想在其中获取索引，请执行以下操作：

$("#button").click(function() {
    var current_index = $("#tabs").tabs("option","selected");
});

这是一个演示：http://jsfiddle.net/sVgAT/

要回答标题指出的问题，在 jQuery 1.8 及更早版本中，您可以：

var current_index = $("#tabs").tabs("option","selected");
$("#tabs").tabs('load',current_index);

在 jQuery 1.9 及更高版本中，您会这样做：

var current_index = $("#tabs").tabs("option","active");
$("#tabs").tabs('load',current_index);

【讨论】：

谢谢，这正是我想要的。
这个解决方案的问题是它会重新加载两次未选择的标签（服务器上的两次命中）。
不幸的是，从最新版本的 jQuery UI 开始，这不再有效。您必须将 "selected" 替换为 "active"，根据下面的 attomman 的回答。
添加 $( "#tabs .ui-tabs-active").click(); 之前对我不起作用

【解决方案2】：

Simen 确实有正确的答案，但自 JQuery UI 1.9 起已弃用此方法

http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active

您现在使用 'active' 而不是 'selected'

所以代码看起来像：

var current_index = $("#tabs").tabs("option","active"); $("#tabs").tabs('load',current_index);

【讨论】：

【解决方案3】：

如果其他人偶然发现了这个问题并且 - 像我一样 - 正在使用 jQuery EasyUI 的选项卡，那么上面的 Simen 答案将不起作用。相反，要刷新选项卡，请使用：

var tab = $('#tt').tabs('getSelected');
tab.panel('refresh');

tt 是您通过创建的标签组的id

<div id="tt" class="easyui-tabs">

【讨论】：

【解决方案4】：

我设法让它工作，但它现在在第一个选项卡不活动时加载了两次。如果有人对此有任何更多建议，将不胜感激。

您可以在上面看到向服务器发出了两次请求，但第一次请求成功，所以它取消了第二次请求。不确定这是否是一个问题..？但是在控制台中看到它并没有让我放心

  constructor: (@element) ->
    @tabIndex = 0
    @tabs = @element.find('#tabs')
    @tabs.tabs
      spinner: "Loading.."
      cache: false
      ajaxOptions:
        cache: false
        error: ( xhr, status, index, anchor ) ->
          $( anchor.hash ).html "Couldn't load this tab. We'll try to fix this as soon as possible."

    #add custom load to make sure they always reload even the current tab when clicked
    @element.find('ul li a').click (e) =>
      if @tabIndex is @tabs.tabs('option', 'selected')
        @tabs.tabs 'load', @tabs.tabs('option', 'selected')
        @tabIndex = @tabs.tabs('option', 'selected')

【讨论】：

这应该是一个单独的问题，以便人们可以正确回答:)

【解决方案5】：

下载此 cookie 插件：

http://plugins.jquery.com/cookie/

在您的页面中插入 jQuery cookie

 <script src="jquery.cookie.js"></script>

并添加：

$(".tabs").click(function() {
    //getter , get the active tab
    var active = $( "#tabs" ).tabs( "option", "active" );
    $.cookie("tabs_selected", active);
});

var cookieValue = $.cookie("tabs_selected");
// setter, set the active tab stocked 
$( "#tabs" ).tabs( "option", "active",cookieValue );

【讨论】：