jquery-ui - ejemplos - tooltip jquery
Cambiar a la pestaña seleccionada por nombre en las pestañas Jquery-UI (13)
¡Solo este código funciona realmente!
$(''#tabs'').tabs();
$(''#tabs'').tabs(''select'', ''#sample-tab-2'');
Si tengo tres pestañas:
<div id="tabs">
<ul>
<li><a href="#sample-tab-1"><span>One</span></a></li>
<li><a href="#sample-tab-2"><span>Two</span></a></li>
<li><a href="#sample-tab-3"><span>Three</span></a></li>
</ul>
</div>
Me gustaría cambiar a # sample-tab-2 por su nombre. Sé que puedo cambiar a una pestaña si sé su número, pero en el caso que me he encontrado no lo sabré.
Notas: JQuery 1.3.1 / JQuery-UI 1.6rc6
Aquí hay un código de muestra para obtener la pestaña seleccionada por nombre. Espero que esto te ayude a encontrar la solución de ypur:
<html>
<head>
<script type="text/javascript"><!-- Don''t forget jquery and jquery ui .js files--></script>
<script type="text/javascript">
$(document).ready(function(){
$(''#tabs'').show();
// shows the index and tab title selected
$(''#button-id'').button().click(function(){
var selTab = $(''#tabs .ui-tabs-selected'');
alert(''tab-selected: ''+selTab.index()+''-''+ selTab.text());
});
});
</script>
</head>
<body>
<div id="tabs">
<ul id="tablist">
<li><a href=''forms/form1.html'' title="form_1"><span>Form 1</span></a></li>
<li><a href=''forms/form2'' title="form_2"><span>Form 2</span></a></li>
</ul>
</div>
<button id="button-id">ClickMe</button>
</body>
</html>
La única manera práctica de obtener el índice basado en cero de sus pestañas es recorrer cada uno de los elementos que componen el tabset (LI> A s) y hacer coincidir su texto interno. Probablemente se pueda hacer de una manera más limpia, pero así es como lo hice.
$(''#tabs ul li a'').each(function(i) {
if (this.text == ''Two'') {$(''#reqTab'').val(i)}
});
$("#tabs").tabs({
selected: $(''#reqTab'').val()
});
Puede ver que utilicé un campo <input id = "reqTab"> oculto en la página para asegurarme de que la variable se movió de una función a la otra.
NOTA: Hay un poco de gotcha: la selección de pestañas después de activar el tabset no parece funcionar como se anuncia en jQuery UI 1.8, por lo que utilicé el índice identificado de mi primer pase para inicializar el tabset con la pestaña deseada seleccionada.
La respuesta de @ bduke en realidad funciona con un ligero ajuste.
var index = $("#tabs>div").index($("#simple-tab-2"));
$("#tabs").tabs("select", index);
Más arriba asume algo similar a:
<div id="tabs">
<ul>
<li><a href="#simple-tab-0">Tab 0</a></li>
<li><a href="#simple-tab-1">Tab 1</a></li>
<li><a href="#simple-tab-2">Tab 2</a></li>
<li><a href="#simple-tab-3">Tab 3</a></li>
</ul>
<div id="simple-tab-0"></div>
<div id="simple-tab-1"></div>
<div id="simple-tab-2"></div>
<div id="simple-tab-3"></div>
</div>
jQueryUI ahora admite llamar "seleccionar" utilizando el selector ID / HREF de la pestaña, pero al construir las pestañas, la opción "seleccionada" todavía solo admite el índice numérico.
Mi voto va a bdukes por ponerme en el camino correcto. ¡Gracias!
La siguiente pieza funcionó para mí
$($("#tabs")[0]).tabs({selected: 1});
¡Espero que esto ayude!
No pude lograr que la respuesta anterior funcionara. Hice lo siguiente para obtener el índice de la pestaña por nombre:
var index = $(''#tabs a[href="#simple-tab-2"]'').parent().index();
$(''#tabs'').tabs(''select'', index);
Parece que usar el ID funciona tan bien como el índice, por ejemplo, simplemente hacer esto funcionará de la caja ...
$("#tabs").tabs("select", "#sample-tab-1");
Esto está bien documentado en los documentos oficiales :
"Seleccione una pestaña, como si se hubiera hecho clic. El segundo argumento es el índice basado en cero de la pestaña que se va a seleccionar o el selector de id del panel al que está asociada la pestaña (el identificador de fragmento href de la pestaña, por ejemplo, hash, apunta a la identificación del panel). "
Supongo que esto se agregó después de que se hizo esta pregunta y, probablemente, después de la mayoría de las respuestas
Puede obtener el índice de la pestaña por nombre con la siguiente secuencia de comandos:
var index = $(''#tabs ul'').index($(''#simple-tab-2''));
$(''#tabs ul'').tabs(''select'', index);
Si está cambiando los hrefs, puede asignar un id a los enlaces <a href="#sample-tab-1" id="tab1"><span>One</span></a> para que pueda encontrar el índice de pestañas por su id.
Tuve problemas para obtener alguna de las respuestas, ya que estaban basadas en las versiones anteriores de JQuery UI. Estamos usando 1.11.4 ( Referencia de CDN ).
Aquí está mi violín con el código de trabajo: http://jsfiddle.net/6b0p02um/ Terminé empalmando pedazos de cuatro o cinco hilos diferentes para que el mío funcione:
$("#tabs").tabs();
//selects the tab index of the <li> relative to the div it is contained within
$(".btn_tab3").click(function () {
$( "#tabs" ).tabs( "option", "active", 2 );
});
//selects the tab by id of the <li>
$(".btn_tab3_id").click(function () {
function selectTab(tabName) {
$("#tabs").tabs("option", "active", $(tabName + "").index());
}
selectTab("#li_ui_id_3");
});
Usa esta función:
function uiTabs(i){
$("#tabs").tabs("option", "selected", i);
}
Y use el siguiente código para cambiar entre pestañas:
<a onclick="uiTabs(0)">Tab 1</a>
<a onclick="uiTabs(1)">Tab 2</a>
<a onclick="uiTabs(2)">Tab 3</a>
prueba esto: pestaña "seleccionar" / "activo"
<article id="gtabs">
<ul>
<li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li>
<li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li>
<li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li>
</ul>
var index = $(''#gtabs a[href="#general-filter-config"]'').parent().index();
// `''select'' no es compatible con jquery ui versión 1.10.0
$(''#gtabs'').tabs(''select'', index);
solución alternativa: use "activo":
$(''#gtabs'').tabs({ active: index });
$(''#tabs'').tabs(''select'', index);
Métodos `''select'' no es compatible en jquery ui 1.10.0. http://api.jqueryui.com/tabs/
Uso este código y trabajo correctamente:
$(''#tabs'').tabs({ active: index });