jQuery UI选项卡 – 显示所有选项卡

嘿大家。 我看到另一篇关于使用特定jQuery UI选项卡的post，一次打开所有选项卡内容。 这或多或少是“全部显示”选项卡。 它似乎对我不起作用。 无论如何，我的页面结构如下所示：

 
 
 Some Tab 
 
 Some Tab 
 
 Some Tab 
 
 Show All 
 
 
 Content 
 
 Content 
 
 Content 
  

这是我使用的JavaScript，基于前面的示例：

 var user_tabs = $("#tabs").tabs({ select: function(event, ui) { if (ui.index == 3) { $("fieldset[id^=tabs-]").show(); } else { $("fieldset[id^=tabs-]").hide(); $(ui.panel).show() } } }); 

我使用的选项卡已正确初始化，但“show all tab”根本不起作用

有任何想法吗？

Answer 1

首先，修复选项卡中的html代码。 您缺少所有链接的 。

然后将上一个标签更改为：

 
 Show All  

添加另一个面板（可以为空）：

并将您的JavaScript更改为：

 var user_tabs = $("#tabs").tabs({ show: function(event, ui) { if (ui.index == 3) { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } }); 

（ 注意从select到show的变化 ）

示例： http ： //jsfiddle.net/niklasvh/km7Le/

Answer 2

这适用于（对我来说）jQuery-ui-1.10.0。 请注意，我使用div，而不是问题中使用的字段集。

 //Do the tabs $('#tabs').tabs({ activate: function (event, ui) { if (ui.newPanel.selector == "#tabs-4") { $("div[id^='tabs-']").attr('style', "display:block;"); $("div[id^='tabs-']").attr('aria-expanded', true); $("div[id^='tabs-']").attr('aria-hidden', false); } else { $("div[id^='tabs-']").attr('style', "display:none;"); $("div[id^='tabs-']").attr('aria-expanded', false); $("div[id^='tabs-']").attr('aria-hidden', true); $(ui.newPanel.selector).attr('style', "display:block;"); $(ui.newPanel.selector).attr('aria-expanded', true); $(ui.newPanel.selector).attr('aria-hidden', false); } } }); 

Answer 3

在版本jQuery UI 1.12中，事件更改为’beforeActivate’和’ui’并返回参数newTab

所以新function看起来像：

 var user_tabs = $("#tabs").tabs({ beforeActivate: function(event, ui) { if (ui.newTab.find('a').attr('href') === '#tabs-4') { $("fieldset[id^='tabs-']").removeClass('ui-tabs-hide'); $("fieldset[id='tabs-4']").addClass('ui-tabs-hide'); } } }); 

Answer 4

在JQuery UI Tabs 1.12.1中，这非常有效：

 var user_tabs = $("#tabs").tabs( {activate: function(event, ui) { if ( ui.newTab.find('a').attr('href') === '#tabs-4') { $("div[id^='tabs-']").show(); } } } )