Jquery postback, maintain same tab after postback

问题:

I'm using jquery tab and following js method, how and what can i modify it to maintain state of tab between postbacks? (This resets tabs to first tab after page_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;
        }); 

回答1:

You can track the active tab in a hidden field using Javascript, then check the hidden field when the page is loaded. (Also in Javascript)

Alternatively, you can use UpdatePanels with ASP.Net AJAX to eliminate the postbacks. (Note that if the tabs are in an update panel, they won't work correctly)

回答2:

An alternative to using a hidden field is to use the cookie property on the tab control

$("#tabs").tabs({ cookie: { expires: 1 } });

You need to reference the jquery.cookie.js file for this to work

jQuery tabs cookie

回答3:

Try the following:

<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>

回答4:

You said

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

I would load the this with css since that's faster. hide is probably doing a display:none;

one solution is writing javascript from codebehind.
and example with 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);

or you could add an attribute to the #search tag with C# and read it with js

C#

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

JS

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

and another solution is with querystring.
you can read the value from the querystring.

I would personally choose the first or the second one.

回答5:

The hidden field approach works well for me. With the .aspx containing

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

and the js ready function containing

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

the active tab will be set per the hidden field. (That's the jQuery UI v1.9 property, 'active' f.k.a. 'selected'.) The various controls that postback can provide for setting hfLastTab.Value to the appropriate index.

I also wanted to be able to point to a particular tab with a URL from another page, and spent a lot of time thrashing adding and trying to parse a hash ref off the end, before going to a querystring parameter, ?t=N. I parse that out in a !Page.IsPostback branch of Page_Load(). For fresh page loads, we go to tab 0 if nothing's spec'd, or tab N if the querystring has the parameter. Lots of ways to handle that parsing. Here's one:

        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();
        }