JQuery UI Tabs – Показать все вкладки

Всем привет. Я увидел еще одно сообщение об использовании специальной вкладки пользовательского интерфейса jQuery, чтобы сразу открыть все содержимое вкладки. Это более или менее вкладка «показать все». Кажется, это не работает для меня. В любом случае, моя структура страницы выглядит так:

<div id="tabs"> <ul class="tabs-1"> <li><a href="#tabs-1"> Some Tab </li> <li><a href="#tabs-2"> Some Tab </li> <li><a href="#tabs-3"> Some Tab </li> <li><a href="#"> Show All </li> </ul> <fieldset id="tabs-1"> Content </fieldset> <fieldset id="tabs-2"> Content </fieldset> <fieldset id="tabs-3"> Content </fieldset> </div> 

Это 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() } } }); 

Ярлыки, которые я использую, инициализированы правильно, но «показать все вкладки» не работает вообще

Есть идеи?

Во-первых, исправьте html-код в своих вкладках. Вам не хватает </a> для всех ссылок.

Затем измените свою последнюю вкладку на:

 <li><a href="#tabs-4"> Show All </a></li> 

Добавьте другую панель (может быть пустым):

 <fieldset id="tabs-4"></fieldset> 

И измените свой 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/

Это работает (для меня) в jQuery-ui-1.10.0. Обратите внимание, что я использую divs, а не поля, как это сделано в вопросе.

 //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); } } }); 
Interesting Posts
Давайте будем гением компьютера.