Karty interfejsu Jquery: Jak ukryć kartę i odpowiadający jej element div, gdy ją zamykam?

Question

Użyłem zakładek JQuery UI i otrzymałem opcję zamykania kart. Domyślnie tworzę trzy zakładki i odpowiadające im trzy elementy div. Teraz, kiedy zamykam kartę, karta i jej div są usuwane. Muszę po prostu ukryć kartę i div, a kiedy kliknę przycisk Dodaj kartę, powinienem po prostu pokazać ukrytą kartę i div. Nie wiem, jak pokazać/ukryć kartę i właściwość div.

Z góry dziękuję.

Jeevi

Answer 1

Nie 100% pewien, od konkretnego kodu, ale spróbuj coś takiego ukrycia-a-nie-usunąć kartę:

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

Answer 2

Na podstawie dyskusji na http://old.nabble.com/UI-Tabs:-How-to-hide-show-a-Tab-td19569388s27240.html co następuje pracował dla mnie -

Dodanie następującego CSS

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

, a następnie korzystając z zakładki Opcje niepełnosprawnych w jednej z następujących form -

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

zobaczyć http://jqueryui.com/demos/tabs/#option-disabled za szczegółowe docs jQuery

Answer 3

Właśnie to przetestowane na dwóch kartach można dodać potrzebne logiki, aby go dostępne dla kart N.

Do tego trzeba otworzyć pierwszą kartę domyślnie następnie otworzyć drugą kartę następnie:

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

Objaśnienie: Rodzic jest używany, aby przejść do div swoich zakładkach , następnie dzieci (": pierwszy") przenoszą cię do ul, potem znowu dzieci (": pierwszy") przenoszą cię do najpierw li, ale zamierzamy ukryć drugą kartę, co oznacza sekund li dlatego właśnie whe używają następnego(), teraz jesteśmy na drugiej karcie, po prostu to ukryjmy.

Przez ostatni, po prostu ukryć zawartość zakładki:

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

Aby ponownie pokazać wszystko tak:

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

Answer 4

Oto kolejny i wierzę, bardziej proste rozwiązanie - po prostu ukryć znaczniki li. W moim przypadku wypustki mieć klasę „dane-nośnik id”:

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

Wtedy można pokazać konkretną kartę:

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

Ukrywanie i pokazywanie skór JOT i pokazuje odpowiednie DIV.

Oto jedna zmarszczka. Po zmianie widoczności karty, wybrana zakładka musi zostać zmieniona. Jest to zgodne z projektem. Nawet przy "opcji" "wyłącz" nie można wyłączyć wybranej karty.. Jest to stosunkowo łatwe do rozwiązania, po prostu przepuszczają widocznych karty i znaleźć pierwszy widoczny wskaźnik:

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

Answer 5

$ ("selektor ul li: równoważników ("+ wskaźnik +")") ukryć();

Answer 6

To również mnie wkurzyło przez jakiś czas, a ja napisałem małą wtyczkę, aby ułatwić. Możesz to sprawdzić tutaj: KylesTechnobabble (z przykładem JSFiddle).

Uwaga: Dotyczy jQuery UI 1.9.2. Nie testowałem niczego więcej.

Answer 7

Cóż, być może nie jest za późno na odpowiedź na to pytanie. To, co zrobiłem jest dać id 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> 

następnie użyłem kodu jQuery $('#tab-6').hide(); ukryć i $('#tab-6').show(); pokazać kartę.

Nadzieja to pomaga Cheers