Pestañas jQuery seleccionando la pestaña específica

Question

Tengo una página que contiene un conjunto de pestañas jQuery. Todas las pestañas apuntan al mismo objetivo div, pero lo cargan con contenido diferente a través de ajax. Cuando realizo la carga inicial de la página completa, debo configurar la pestaña activa de manera diferente según diversos factores. El contenido en el div de destino ya está configurado en el servidor para esta carga inicial, por lo que no es necesario que haga clic en la pestaña, solo tengo que configurar la pestaña correcta en 'seleccionado'. He intentado configurar la clase del elemento html "li" relevante en "ui-tabulaciones-seleccionadas". Esto tiene el efecto inicial deseado, pero una vez que se carga la página, al seleccionar otra pestaña, la preseleccionada no se apaga, dejando dos pestañas seleccionadas.

Entonces, ¿alguien sabe una forma alternativa de preseleccionar una pestaña (sin hacer clic), o una solución al extraño comportamiento "ui-tabulaciones-seleccionadas" que estoy viendo.

Gracias.

<script type="text/javascript"> 
    $(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       } 
      } 
     }); 

     $("#panelTabs").tabs({ 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     }); 
    }); 
    </script> 

Y el # fragmento C que construye el UL:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      _panelTabs.Controls.Add(ctl); 

Otra versión:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       string active = ""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        //active = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + active + ">"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       alert('initialising tabs'); 
       $(""#panelTabs"").tabs({ 
        ajaxOptions: { 
         error: function(xhr, status, index, anchor) { 
          $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible.""); 
         } 
        }, 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        } 
       }); 
      });"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //_panelTabs.Controls.Add(ctl); 
      Page.Controls.Add(ctl); 

Answer 1

usted podría tener la primera línea interior de su función activar pestaña eliminar la clase seleccionada:

var uiTabsSelected = '.ui-tabs-selected'; 
$(uiTabsSelected).removeClass(uiTabsSelected); 

Answer 2

Lo que estás buscando es el selected option. P.ej.

$("#MyTabs").tabs({ 
    selected: 2 
}); 

Answer 3

cambiar esta situación:

html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 

A esto:

html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 

Editar: y ...

$(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       }}, 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     });  

    }); 

Answer 4

La solución consistió en agregar y quitar clases, como sugirió ethagnawl. El siguiente C# muestra tanto la UL que se está construyendo, como la inyección de guiones jQuery requerida. El bit importante está en la función show: donde las clases están siendo manipuladas. Es este código el que soluciona el problema.

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       //string tabClass = " class=\"ui-state-default\""; 
       string tabClass = " class=\"ui-state-default\""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        tabClass = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + tabClass + ">"); 
       //tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       $('#panelTabs').tabs({ 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        }, 
        show: function(event, ui) { 
         // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work 
         $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); 
         $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); 

         //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up 
        } 
       }); 
      });"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run 
      Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery 

Answer 5

En caso de que alguien más viene aquí en busca de la respuesta, la actual (hasta la fecha) manera de seleccionar una pestaña (jQuery UI 1.10) es usar la opción "activa":

Inicializar las pestañas con la opción activa se especifica:

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

http://api.jqueryui.com/tabs/#option-active