asp.net bootstrap 在回发事件后保持当前活动选项卡

Posted

技术标签:

【中文标题】asp.net bootstrap 在回发事件后保持当前活动选项卡【英文标题】:asp.net bootstrap Keep current active tab after post-back event 【发布时间】:2014-05-22 18:12:23 【问题描述】:

我有以下 asp.net aspx 代码

<asp:LinkButton  CssClass="form-search" ID="LinkButtonSearch"  runat="server">Search</asp:LinkButton>

<br />

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>

当我单击链接按钮时,此脚本代码在回发事件后保持活动选项卡

<script>
  $(document).ready( function()
    $('#myTab a').click(function (e) 
        e.preventDefault()
        $(this).tab('show')
    );

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) 
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    );

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
  );
</script>

注意:此代码仅在我重新加载当前页面时才能正常工作。它保持当前选项卡焦点。但是当你点击链接按钮时,它会带我回到默认选项卡。

如何使这段代码也适用于任何控件的回发事件。

注意:我从堆栈帖子中获取了这个示例:How do I keep the current tab active with twitter bootstrap after a page reload?。此解决方案已发布者:@koppor。

任何帮助

【问题讨论】:

可能是***.com/questions/21136981/…的欺骗 @Alicia 谢谢你的链接 请在 Fiddle (html, javasript) 中更新您的代码 嗨@Djama,我认为您在尝试显示最后一个选项卡时遇到了问题。将您的代码放入$(document).ready() 函数中。这是我之前回答 ***.com/questions/21136981/… 的第三步。 @aledpardo 编辑了脚本,但我仍然遇到同样的问题,回发后没有保留当前选项卡。你说我在尝试显示最后一个标签时遇到问题,你能更明确一点 【参考方案1】:

不熟悉 jQuery,所以当我遇到这个问题时,我寻求了一个 asp.net 解决方案。 我通过更改列表中的 a href 并替换为 asp:linkbutton 解决了这个问题。 然后我还去了包含选项卡的 div 并添加 runat = "server" 到每个,还添加了 ID="Tab1" , Tab2 等等。 然后在链接按钮后面的代码上,我添加了以下代码

Me.Tab1.Attributes("class") = "tab-pane active"
Me.Tab2.Attributes("class") = "tab-pane"
Me.Tab3.Attributes("class") = "tab-pane"

对于您想要激活的选项卡,您将属性更改为选项卡窗格活动。 这样,当单击链接按钮时,只有您希望处于活动状态的选项卡处于活动状态并处于回发状态,因为这些控件现在位于服务器端,您将保持在活动选项卡上。

【讨论】:

你的回答有点密集。【参考方案2】:

我尝试了你的脚本,它解决了我的一个问题,我将此代码添加到我的提交按钮

Response.Redirect("Settings.aspx#step2");

希望对你有用

【讨论】:

以上是关于asp.net bootstrap 在回发事件后保持当前活动选项卡的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET,在回发时显示加载消息

asp.net sessionID 在回发时更改?

asp .net背景图像在回发时闪烁

在回发期间启用/禁用 Asp.net Image 按钮

如何在回发 ASP.Net Core 后保持选项卡处于活动状态

如何避免在回发时从 asp.net 重复输入?