使用Asp.Net中的簡單標籤後回傳後保留活動標籤

Question

我正在使用Simple Tab進行ASP.NET Web應用程序。你可以在這裏看到簡單標籤的Demo。

即使在回發之後，我想保留活動選項卡。

我試着寫下面的代碼，但無法取得進展。

 $(document).ready(function() { 
      debugger; 
      //Default Action 
      var activeTab; 
      if (activeTab == undefined) { <-- Added by me but the variable activeTab is refreshing every time and is undefined for every post back. 
       $(".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() { 
       debugger; 
       $("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 
       activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
       $(activeTab).fadeIn(); //Fade in the active content 
       return false; 
      }); 

     }); 

Answer 1

經過大量的小徑。

在asp.net頁面中使用以下隱藏字段。

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

現在修改代碼如下。

$(document).ready(function() { 
     //debugger; 
     //Default Action 
     var setActiveTab = $get("<%=hdnActiveTab.ClientID%>").value; 
     if (setActiveTab == 0) { 
      $(".tab_content").hide(); //Hide all content 
      $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
      $(".tab_content:first").show(); //Show first tab content 
     } else {$(".tab_content").hide(); 
      switch (setActiveTab) { 
       case "#tab1": 
        $("ul.tabs li:eq(0)").addClass("active").show(); $(".tab_content:eq(0)").show(); 
        break; 
       case "#tab2": 
        $("ul.tabs li:eq(1)").addClass("active").show(); $(".tab_content:eq(1)").show(); 
        break; 
       case "#tab3": 
        $("ul.tabs li:eq(2)").addClass("active").show(); $(".tab_content:eq(2)").show(); 
        break; 
       case "#tab4": 
        $("ul.tabs li:eq(3)").addClass("active").show(); $(".tab_content:eq(3)").show(); 
        break; 
      } 
     } 
     //On Click Event 
     $("ul.tabs li").click(function() { 
      //debugger; 
      $("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 rel attribute value to identify the active tab + content 
      $get("<%=hdnActiveTab.ClientID%>").value = activeTab; //Preserve Active Tab Even After PostBack 
      $(activeTab).fadeIn(); //Fade in the active content 
      return false; 
     }); 

    });