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); } } }); 
  • Автоматически изменять размер диалогового окна пользовательского интерфейса jQuery на ширину содержимого, загружаемого ajax
  • Иконки в заголовке диалогового окна jQuery
  • Как можно отменить выбор текста с помощью Javascript или jQuery?
  • Как анимировать элементы ng-repeat относительно событий кликов, вызывающих изменение
  • Как локализовать jQuery UI Datepicker?
  • Добавить в JQuery-ui отсортированный список
  • Как использовать jQuery UI Calendar / Date PIcker для недели, а не дня?
  • Найдите разницу между двумя датами (за исключением выходных дней)
  • Автозаполнение JQuery, соответствующее нескольким неупорядоченным словам в строке
  • Можно ли настроить jQuery UI Datepicker для отключения субботы и воскресенья (и праздников)?
  • Любая замена JQuery () для родного JavaScript?
  • Interesting Posts

    Javascript в Virtual Directory не знает о виртуальном каталоге

    Как передать значение (а не ссылку) переменной JS в функцию?

    Как получить идентификатор нового объекта из мутации?

    Преимущества прототипа JavaScript

    JQuery: В чем разница между «var test» и «var $ test»

    Рендеринг шаблона Jinja в Flask после ответа ajax

    Parse Float имеет ограничение округления? Как я могу это исправить?

    Как я могу захватить ошибки проверки в новой структуре Backbone.Model во время создания экземпляра?

    Как разделить логику между редукторами Redux и создателями действий?

    Parsererror / SyntaxError: Неожиданный токен <

    Как обрабатывать локализацию в файлах JavaScript?

    Как сохранить музыкальный проигрыватель в нижнем колонтитуле страницы, который не перезагружается, когда я нажимаю ссылку на подстраницу?

    Перехват сообщений консоли веб-браузера

    XMLHttpRequest: ошибка сети 0x80070005, доступ запрещен на Microsoft Edge (но не в IE)

    Обнаруживать, изменился ли URL-адрес в iFrame

    Давайте будем гением компьютера.