Question

我有以下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>

当我点击LinkButton

时，此脚本代码会在回发后事件后保留活动标签

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

任何帮助

Answer 1

不熟悉jQuery，所以当我遇到这个问题时，我寻求一个asp.net解决方案。我通过改变列表中的一个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"

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

Answer 2

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

的Response.Redirect（＆＃34;＃Settings.aspx第二步＆＃34）;

希望它适合你的

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

2 个答案: