Question

我正在使用jquery选项卡并遵循js方法，如何以及如何修改它以维护回发之间的tab状态？（这会在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;
        });

Answer 1

您可以使用Javascript跟踪隐藏字段中的活动选项卡，然后在加载页面时检查隐藏字段。（也在Javascript中）

或者，您可以将UpdatePanels与ASP.Net AJAX一起使用来消除回发。（请注意，如果选项卡位于更新面板中，它们将无法正常工作）

Answer 2

使用隐藏字段的替代方法是使用选项卡控件上的cookie属性

$（ “＃选项卡”）。翼片（{ 曲奇饼： { 到期：1 } }）;

您需要引用jquery.cookie.js文件才能使其正常工作

jQuery tabs cookie

Answer 3

尝试以下方法：

<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

你说了

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

我会用css加载它，因为它更快。 hide可能正在显示：none;

一个解决方案是从codebehind编写javascript。
和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);

或者您可以使用C＃向#search标记添加属性，并使用js

进行读取

C＃

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

JS

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

另一个解决方案是使用查询字符串。
你可以从查询字符串中读取值。

我个人会选择第一个或第二个。

Answer 5

隐藏字段方法对我很有用。包含.aspx

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

和包含

的js ready函数

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

将根据隐藏字段设置活动选项卡。（这是jQuery UI v1.9属性，'active'f.k.a。'selected'。）回发的各种控件可以提供将hfLastTab.Value设置为适当的索引。

我还希望能够指向一个带有来自另一个页面的URL的特定选项卡，并且在转到查询字符串参数之前，花了很多时间来讨论添加并尝试解析一个哈希引用。 = N。我在Page_Load（）的.Page.IsPostback分支中解析了它。对于新页面加载，如果没有指定，我们转到选项卡0，如果查询字符串具有参数，则转到选项卡N.有很多方法可以处理解析。这是一个：

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

Jquery回发，在回发后维护相同的选项卡

5 个答案: