Problemas para anular la selección de todas las pestañas

Question

Configuré algunas pestañas jQuery para comenzar sin pestañas seleccionadas de esta manera:

$('#tabs').tabs( { selected: -1 } );  

Entonces también tengo un enlace separado que cuando se presiona debe anular la selección de todas las pestañas.

$("#deselectButton").click(function(){      
    $('#tabs').tabs( 'select' , -1 )
});

o

$("#deselectButton").click(function(){      
    $('#tabs').tabs( 'selected' , -1 )
});

El clic de deselectButton deselecciona el contenido de las pestañas, sin embargo, el título de las pestañas permanece activo con la clase 'ui-tabs-selected ui-state-active'.

¿Cuál es la forma correcta de anular la selección de todas las pestañas?

Answer 1

Pruebe este código:

$("#deselectButton").click(function(){          
    $('#tabs').tabs( 'selected' , -1 )
    $(".ui-tabs-selected").removeClass("ui-state-active").removeClass("ui-tabs-selected");
});

Answer 2

jQuery 1.10 requiere que la opción plegable se establezca en verdadero.

$('#tabs').tabs('option', 'collapsible', true);
$('#tabs').tabs( 'option', 'active', false );

Answer 3

Si está utilizando jQuery UI versión 1.9+, entonces el código CSS ha cambiado a:

$('#tabs').tabs('option', 'active', false);

o:

$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');

según los comentarios a continuación. Gracias