plugin - jquery ui selectmenu

jQuery UI pestañas. Cómo seleccionar una pestaña basada en su id no basado en índice

Question

Tengo dos pestañas y configuré usign jQuery UI.

ul  class="tabs"
  li  tabone
  li tabtwo
ul

dinámicamente desde el código C # detrás ocultaré o seleccionaré alguna pestaña, por ejemplo, tabtwo y la otra pestaña debe ocultarse o no mostrarse. Puedo hacer esto en JavaScript usando .tabs({selected:1}); y .tabs(disable:0). pero no quiero usar los índices de pestañas para hacerlo.

¿Hay alguna alternativa para seleccionar pestañas basadas en su nombre / identificación?

Answer 1

$ ("# tabulaciones"). pestañas ({activa: [0,2], deshabilitada: [3], seleccionada: 2}); Donde seleccionado se usa para abrir Pestaña particular o Seleccionar pestaña particular en onload.

Answer 2

A partir del documento más reciente, el método de select toma un índice o la identificación del panel de la pestaña (el valor hash href). La documentación dice:

Seleccione una pestaña, como si se hubiera hecho clic. El segundo argumento es el índice basado en cero de la pestaña 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 ID del panel).

Entonces, dado un diseño como

<div id="myTabs">    
    <ul  class="tabs">
      <li><a href="#tabone">tabone</a></li>
      <li><a href="#tabtwo">tabtwo</a></li>
    </ul>   
</div>

los siguientes trabajos

$(''#myTabs'').tabs(''select'', ''#tabtwo'');

Aquí hay un example .

ACTUALIZAR

La solución anterior funciona en versiones de jQuery UI inferiores a 1.9. Para una solución en las versiones 1.9+ vea la answer @ stankovski.

Answer 3

Basándose en la respuesta de @ stankovski, una forma más precisa de hacerlo que funcionará para todos los casos de uso (por ejemplo, cuando una pestaña se carga mediante ajax y el atributo href del ancla no se corresponde con el hash), la identificación en cualquier el caso se corresponderá con el atributo "aria-controls" del elemento li. Entonces, por ejemplo, si está tratando de activar una pestaña basada en location.hash, que está configurada en la identificación de la pestaña, entonces es mejor buscar "aria-controls" que para "href".

Con jQuery UI> = 1.9:

var index = $(''#tabs > ul > li[aria-controls="simple-tab-2"]'').parent().index();
$("#tabs").tabs("option", "active", index);

En el caso de establecer y verificar el hash url:

Al crear las pestañas, use el evento ''activate'' para establecer la ubicación.hasta la ID del panel:

$(''#tabs'').tabs({
  activate: function(event, ui) {                   
      var scrollTop = $(window).scrollTop(); // save current scroll position
      window.location.hash = ui.newPanel.attr(''id'');
      $(window).scrollTop(scrollTop); // keep scroll at current position
  }    
});

A continuación, utilice el evento window hashchange para comparar la ubicación.haga clic en el ID del panel (haga esto buscando el atributo aria-controls del elemento li):

$(window).on(''hashchange'', function () {
  if (!location.hash) {
    $(''#tabs'').tabs(''option'', ''active'', 0);
    return;
  }

  $(''#tabs > ul > li'').each(function (index, li) {
    if (''#'' + $(li).attr(''aria-controls'') == location.hash) {
      $(''#tabs'').tabs(''option'', ''active'', index);
      return;
    }
  });


});

Esto manejará todos los casos, incluso cuando las pestañas usen ajax. Además, si tiene pestañas anidadas, no es demasiado difícil de manejar con un poco más de lógica.

Answer 4

Descubrí que esto funciona más fácilmente que obtener un índice. Para mis necesidades, estoy seleccionando una pestaña basada en un hash url

var target = window.location.hash.replace(/#/,''#tab-'');
if (target) { 
    jQuery(''a[href=''+target+'']'').click().parent().trigger(''keydown'');      
}   

Answer 5

Esta es la respuesta

var index = $(''#tabs a[href="#simple-tab-2"]'').parent().index();
$("#tabs").tabs("option", "active", index);

Answer 6

La respuesta aceptada tampoco funcionó, pero encontré la solución en un hilo similar: cambiar a la pestaña seleccionada por nombre en las pestañas de Jquery-UI

var index = $(''#tabs a[href="#simple-tab-2"]'').parent().index();
$(''#tabs'').tabs(''select'', index);

Con jQuery UI> = 1.9:

var index = $(''#tabs a[href="#simple-tab-2"]'').parent().index();
$("#tabs").tabs("option", "active", index);

Answer 7

Lo hice así

if (document.location.hash != '''') {
   //get the index from URL hash
   var tabSelect = document.location.hash.substr(1, document.location.hash.length);
   console.log("tabSelect: " + tabSelect);
   if (tabSelect == ''discount'')
   { 
       var index = $(''#myTab a[href="#discount"]'').parent().index();
       $("#tabs").tabs("option", "active", index);
       $($(''#myTab a[href="#discount"]'')).tab(''show'');
   }
}

Answer 8

Ninguna de estas respuestas funcionó para mí. Acabo de evitar el problema. Hice esto:

$(''#tabs-tab1'').removeClass(''tabs-hide'');
$(''#tabs-tab2'').addClass(''tabs-hide'');
$(''#container-tabs a[href="#tabs-tab2"]'').parent().removeClass(''tabs-selected'');
$(''#container-tabs a[href="#tabs-tab1"]'').parent().addClass(''tabs-selected'');

Funciona muy bien.

Answer 9

Primera pestaña activa

$("#workflowTab").tabs({ active: 0 });

Última pestaña activa

$("#workflowTab").tabs({ active: -1 });

2da pestaña activa

$("#workflowTab").tabs({ active: 1 });

Funciona como una matriz

Answer 10

Puede tener efectos secundarios si hay otros oyentes, y no se siente tan bien como interactuando a través de la API de complementos, pero ofrece un código menos detallado si solo "hace clic" en la pestaña, en lugar de contar su índice y establecer se activa después, y es bastante intuitivo lo que está sucediendo. Tampoco fallará si los ui-guys deciden renombrar la opción nuevamente.

$(''#tabs'').tabs(); 
$(''#tabs a[href="#tabtwo"]'').click();

Sin embargo, es intrigante que el código de las pestañas ui tenga una _getIndex ( _getIndex ) con el comentario:

"meta-función para dar a los usuarios la opción de proporcionar una cadena href en lugar de un índice numérico"

pero no lo usa cuando configura la opción activa, solo cuando se llama a habilitar, deshabilitar y cargar.

Answer 11

Según el UI Doc:

1. Primero obtenga el índice de la pestaña que desea activar.

   var index = $(''#tabs a[href="''+id+''"]'').parent().index();

2. Actívalo

   tabs.tabs( "option", "active", index );

Answer 12

Supongo que realmente tienes el diseño como:

<ul  class="tabs">
  <li id="tabone">one</li>
  <li id="tabtwo">two</li>
</ul>

SI esa suposición es correcta, simplemente usa la ID para seleccionar la "pestaña"

$(''#tabone'').css("display","none");

EDITAR: selecciona la pestaña en tu diseño:

var index = $(''.tabs ul'').index($(''#tabone'')); 
$(''.tabs ul'').tabs(''select'', index); 

Answer 13

Nota: Debido a los cambios realizados en jQuery 1.9 y jQuery UI, esta respuesta ya no es la correcta. Por favor, vea la respuesta de @ stankovski a continuación.

Primero debe encontrar el índice de la pestaña (que es solo su posición en una lista) y luego seleccionar específicamente la pestaña usando el evento de selección provisto por jQuery UI ( tabs->select ).

var index = $(''#tabs ul'').index($(''#tabId''));
$(''#tabs ul'').tabs(''select'', index);

Actualización: Por cierto, me doy cuenta de que esto (en última instancia) todavía está seleccionando por índice. Sin embargo, no es necesario que conozca la posición específica de las pestañas (especialmente cuando se generan dinámicamente como se le preguntó en la pregunta).

Answer 14

                <div id="tabs" style="width: 290px">
                    <ul >
                        <li><a id="myTab1" href="#tabs-1" style="color: Green">Báo cáo chuẩn</a></li>
                        <li><a id="myTab2" href="#tabs-2" style="color: Green">Báo cáo mở rộng</a></li>
                    </ul>
                    <div id="tabs-1" style="overflow-x: auto">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/ReportDate")"><span class=""></span>Báo cáo theo ngày</a></li>

                        </ul>
                    </div>
                    <div id="tabs-2" style="overflow-x: auto; height: 290px">
                        <ul class="nav">

                            <li><a href="@Url.Content("~/Report/PetrolReport#tabs-2")"><span class=""></span>Báo cáo nhiên liệu</a></li>
                        </ul>
                    </div>
                </div>


        var index = $("#tabs div").index($("#tabs-1" ));
        $("#tabs").tabs("select", index);
       $("#tabs-1")[0].classList.remove("ui-tabs-hide");