Jquery devolución de datos, mantener la misma pestaña después de la devolución de datos

Question

Estoy usando la pestaña jquery y siguiendo el método js, ​​¿cómo y qué puedo modificar para mantener el estado de la pestaña entre las devoluciones? (Esto restablece pestañas a primera pestaña después de Load)

$(document).ready(function() { 

     //When page loads... 
     $(".tab_content").hide(); //Hide all content 
     $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
     $(".tab_content:first").show(); //Show first tab content 

     //On Click Event 
     $("ul.tabs li").click(function() { 

      $("ul.tabs li").removeClass("active"); //Remove any "active" class 
      $(this).addClass("active"); //Add "active" class to selected tab 
      $(".tab_content").hide(); //Hide all tab content 

      var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
      $(activeTab).fadeIn(); //Fade in the active ID content 
      return false; 
     }); 

Answer 1

puede realizar un seguimiento en la pestaña activa en un campo oculto con Javascript, a continuación, compruebe el campo oculto cuando se carga la página. (También en Javascript)

Alternativamente, puede usar UpdatePanels con ASP.Net AJAX para eliminar las devoluciones de datos. (Tenga en cuenta que si las pestañas están en un panel de actualización, que no funcionan correctamente)

Answer 2

Una alternativa al uso de un campo oculto es el uso de la propiedad de la galleta en el control de ficha

$ ("# pestañas "). pestañas ({ cookie: { expira: 1 } });

debe hacer referencia al archivo jquery.cookie.js para que esto funcione

jQuery tabs cookie

Answer 3

Pruebe lo siguiente:

<p class="hiddenData"><asp:HiddenField ID="hdnData" runat="server" /></p> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.tabs li a').click(function() { }); 
     $('.tabs li').hover(function() { 
      var liData = $(this); 
      $('.hiddenData input:hidden').val(liData.find('span').text()); 
     }); 
     if ($('.hiddenData input:hidden').val() != '') { 
      var liList = $('.tabs li'); 
      var hiddenData = $('.hiddenData input:hidden').val(); 
      liList.each(function() { 
       if ($(this).find('span').text() == hiddenData) { 
        $(this).find('a').click(); 
       } 
      }); 
     } 
    }); 
</script> 

Answer 4

Dijiste

//When page loads... 
$(".tab_content").hide(); //Hide all content 

Cargaría esto con css ya que es más rápido. hide probablemente esté haciendo una exhibición: ninguno;

Una solución es escribir javascript desde codebehind.
y el ejemplo con C#

var selectedTab = IsAdvancedSearch ? "{'selected':1}" : String.Empty; 
ScriptManager.RegisterClientScriptBlock(this, GetType(), "search", String.Format(@"jQuery(document).ready(function() {{ jQuery('#search').tabs({0}); }});", selectedTab), true); 

o se puede añadir un atributo a la etiqueta #search con C# y leerlo con js

C#

search.Attributes.Add("selectedtab", "1"); 

JS

jQuery("#search").attr("selectedtab"); 

y otra solución es con querystring.
puede leer el valor de la cadena de consulta.

Personalmente elegiría la primera o la segunda.

Answer 5

El enfoque de campo oculto funciona bien para mí. Con el .aspx que contiene

<asp:HiddenField runat="server" ID="hfLastTab" Value="0" /> 

y la función js lista que contiene

$("#tabs").tabs({ active: <%= hfLastTab.Value %> }); 

la pestaña activa será establecido por el campo oculto. (Esa es la propiedad jQuery UI v1.9, 'active' f.k.a.'selected'.) Los diversos controles que la devolución de datos puede proporcionar para configurar hfLastTab.Value en el índice apropiado.

También quería poder apuntar a una pestaña en particular con una URL de otra página, y dediqué mucho tiempo agregando y tratando de analizar una referencia hash al final, antes de ir a un parámetro querystring,? t = N Analizo eso en una rama! Page.IsPostback de Page_Load(). Para nuevas cargas de página, vamos a la pestaña 0 si nada está especificado, o la pestaña N si la cadena de consulta tiene el parámetro. Muchas formas de manejar ese análisis. Aquí hay uno:

 if (!Page.IsPostBack) { 
      string pat = @"t=(\d)"; 
      Regex r = new Regex(pat, RegexOptions.IgnoreCase); 
      Match m = r.Match(Request.Url.Query); 
      if (m.Success) hfLastTab.Value = m.Groups[0].ToString(); 
     }