Pestañas de IU de Jquery: ¿Cómo puedo ocultar una pestaña y su div correspondiente cuando la cierro?

Question

He utilizado las pestañas de IU de Jquery y tengo la opción de cerrar las pestañas. Por defecto, estoy creando tres pestañas y sus tres divs correspondientes. Ahora cuando cierro una pestaña, la pestaña y su div se eliminan. Necesito ocultar la pestaña y div y cuando hago clic en Agregar pestaña, debería mostrar la pestaña oculta y div. No estoy seguro de cómo mostrar/ocultar la pestaña y la propiedad div.

Gracias de antemano.

jivi

Answer 1

No es 100% seguro en el código específico, pero intentar algo como esto para ocultar-y-no-eliminar la pestaña:

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

Answer 2

Sobre la base de la discusión en http://old.nabble.com/UI-Tabs:-How-to-hide-show-a-Tab-td19569388s27240.html el siguiente tiene trabajado para mí -

Agregar el siguiente CSS

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

y luego usando las fichas de opciones de movilidad reducida en cualquiera de las siguientes formas -

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

ver http://jqueryui.com/demos/tabs/#option-disabled de los documentos detallados jQuery

Answer 3

Acabo de probar esto por dos pestañas, puede añadir la lógica necesaria para que sea disponible para N pestañas.

Para ello se abre una primera pestaña por defecto, entonces abre una segunda pestaña a continuación:

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

Explicación: La matriz se utiliza para ir a la div de las pestañas , entonces los niños (": primero") te mueven a través del ul, luego de nuevo los niños (": primero") te mueven al primero li, pero vamos a ocultar la segunda pestaña, que significa el segundo li es por eso que cuando usamos el siguiente(), ahora estamos en la segunda pestaña, y luego simplemente lo ocultamos.

Por último, simplemente ocultar el contenido de la ficha:

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

mostrar todo de nuevo sólo:

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

Answer 4

Aquí es otra y creo que, la solución más sencilla - simplemente ocultar las etiquetas li. En mi caso, las pestañas tienen clase '-soporte de datos-id':

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

Entonces usted puede mostrar una pestaña en particular:

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

ocultar y mostrar las pieles pestañas y muestra divs correspondientes.

Aquí hay una arruga. Después de cambiar la visibilidad de la pestaña, la pestaña seleccionada debe ser modificada. Esto es por diseño. Incluso con "opción" "desactivar" la pestaña seleccionada no se puede deshabilitar.. Esto es relativamente fácil de solucionar, solo bucle a través de las pestañas visibles y encontrar el primer índice visibles:

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

$ ("li selector de UL: eq ("+ index +")") hide();

Answer 6

Esto me molestó durante un tiempo y terminé escribiendo un pequeño complemento para hacerlo más fácil. Puede consultarlo aquí: KylesTechnobabble (con un ejemplo de JSFiddle).

Nota: esto es para jQuery UI 1.9.2. No he probado con nada más.

Answer 7

Bueno, puede que no sea demasiado tarde para responder a esta consulta. Lo que hice es dar un id a li html

<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> 

Luego utiliza el código jQuery $('#tab-6').hide(); para ocultar y $('#tab-6').show(); Para mostrar la ficha.

Esperanza esto ayuda Saludos