如何在回发期间停留在选定的选项卡中？答案

【问题标题】：How do I stay in the selected tab during a postback?如何在回发期间停留在选定的选项卡中？
【发布时间】：2011-10-10 15:47:34
【问题描述】：

我有一个包含三个选项卡的 aspx 页面。当我单击 tab3 中的按钮时，将发生回发并将我带回 tab1。我如何留在tab3？以下是我的 aspx 页面。我还注意到我们有一个 javascript 来将活动选项卡设置为 tab1。谁能告诉我如何修改它，以便在回发期间将选定的选项卡设置为活动选项卡？

<script type="text/javascript">
    $(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;
        });

    });

<div id="content">    
<ul class="tabs">
<li><a href="#tab1">Edit</a></li> 
<li><a href="#tab2">History</a></li> 
<li><a href="#attachmentcontent">Attachments</a></li> 
</ul>


<div class="tab_container"> 

<div id="tab1" class="tab_content">

...

【问题讨论】：

我已经通过使用隐藏字段解决了这个问题。我无法在这里发布我的 jquery 脚本。如果有人需要帮助，请给我发电子邮件。

标签： asp.net tabs

【解决方案1】：

您指的是维护状态，常见的方法是在会话或视图状态中存储一个变量，指示什么是“选定”选项卡。然后在页面加载时将其读回并将其应用到您的页面的适当位置。

【讨论】：

【解决方案2】：

保留选项卡 3 的会话值，并在回发期间将选项卡位置设置为该会话值。

基本上，您需要将状态存储在某处，是否是某个 cookie/会话状态完全取决于您。然后将该会话状态变量加载到控件的属性值中，以将其设置回您正在查看的位置。

阅读 asp.net 会话状态。

【讨论】：

我注意到我们有一个 javascript 来将活动标签设置为 tab1。谁能告诉我如何修改它，以便在回发期间将其设置为选定的选项卡？
viewstate 不是更好吗？我的意思是，如果我不需要，我真的不喜欢使用会话。而且因为这个过程只在一个页面上进行，我们可以使用 ViewState 对吗？

【解决方案3】：

会话有一些缺点。 JavaScript 只能读取 session 的第一个值。例如，您在Page_Load 中设置了Session["name"]="Gaolai Peng"。如果您设置了Session["name"]="Rauf"，然后在按钮单击的回帖中。如果您使用 JavaScript 阅读会话，它将返回“Gaolai Peng”。所以请使用HiddenField 而不是会话。

【讨论】：

@Gaolai Peng 你在用jQuery标签吗？

【解决方案4】：

使用 PostBackUrl 属性并将其设置为/#<your tabID>

示例：

PostBackUrl = "/#tab1"

【讨论】：