Вкладки пользовательского интерфейса Jquery: как скрыть вкладку и соответствующий элемент div при ее закрытии

Question

Я использовал вкладки пользовательского интерфейса Jquery и дал возможность закрыть вкладки. По умолчанию я создаю три вкладки и три соответствующие дивы. Теперь, когда я закрываю вкладку, вкладка и ее div удаляются. Мне нужно просто скрыть вкладку и div, и когда я нажимаю Add Tab, я должен просто показать скрытую вкладку и div. Я не уверен, как показать / скрыть свойство tab и div.

Заранее спасибо.

Jeevi

Answer 1

На основании обсуждения на http://old.nabble.com/UI-Tabs:-How-to-hide-show-a-Tab-td19569388s27240.html мне помогло следующее -

Добавление следующего CSS

.ui-tabs .ui-state-disabled { 
    display: none; /* disabled tabs don't show up */ 
} 

, а затем с помощью вкладок отключить опции в одной из следующих форм -

$( ".selector" ).tabs({ disabled: [1, 2] }); //when initializing the tabs
$( ".selector" ).tabs( "option", "disabled", [1, 2] ); // or setting after init

см. http://jqueryui.com/demos/tabs/#option-disabled для подробных документов jQuery

Answer 2

$ (". Селектор ul li: eq (" + index + ")"). Hide ();

Answer 3

Я только что проверил это для двух вкладок, вы можете добавить необходимую логику, чтобы сделать ее доступной для N вкладок.

Для этого по умолчанию открывается первая вкладка, затем открывается вторая вкладка , затем:

$("#yourTabHref").parent().children(":first").children(":first").next().hide();

Пояснение: Родитель используется для перехода на div ваших вкладок, затем children (": first") перемещает вас на ul , затем снова children (": first") перемещает вас к first li , но мы собираемся скрыть вторую вкладку, это означает second li , поэтому при использовании next (), теперь мы на второй вкладке, затем просто скрой это.

Наконец, просто скрыть содержимое вкладки:

$("#yourTabHref").hide();

Чтобы показать все снова, просто:

$("#yourTabHref").parent().children(":first").children(":first").next().show();
$("#yourTabHref").hide();

Answer 4

Ну, может быть, еще не поздно ответить на этот запрос. Что я сделал, так это присвоил html li идентификатор

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">New Item</a></li>
    <li><a href="#tabs-2">Product</a></li>
    <li><a href="#tabs-3">Purchase Order</a></li>
    <li><a href="#tabs-4">Administration</a></li>
    <li><a href="#tabs-5">License</a></li>
    <li **id="tab-6"**><a href="#tabs-6">Test</a></li>
    <li><a href="#tabs-7">Specific Product</a></li>
    <li><a href="#tabs-8">Support</a></li>
  </ul>

затем я использовал код JQuery $('#tab-6').hide();, чтобы скрыть, и $('#tab-6').show();, чтобы показать вкладку.

Надеюсь, это поможет Ура

Answer 5

Это тоже меня немного напрягало, и я написал небольшой плагин, чтобы было проще. Вы можете проверить это здесь: KylesTechnobabble (с примером JSFiddle).

Примечание: это для jQuery UI 1.9.2. Я не проверял ничего больше.

Answer 6

Вот еще одно, и я считаю, более простое решение - просто скрыть теги li. В моем случае вкладки имеют класс «идентификатор носителя данных»:

var tabs = $("li[data-carrier-id]");
tabs.hide();

Затем вы можете показать определенную вкладку:

$("li[data-carrier-id=" + carrierId + "]").show();

Скрытие и отображение вкладок скрывает и показывает соответствующие элементы.

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

var firstVisibleTabIndex;
tabs.each(function (index) {
  if ($(this).is(":visible")) {
     firstVisibleTabIndex = index;
     return false;
   }
 });
 var jqTabs = $("#tabs").tabs();
 jqTabs.tabs("option", "active", firstVisibleTabIndex); 

Answer 7

Не уверен на 100% в конкретном коде, но попробуйте что-то вроде этого, чтобы скрыть и не удалить вкладку:

$( ".selector" ).tabs({
    remove: function(event, ui) { $(this).hide(); return false; }
});