twitter-bootstrap asp.net bootstrap 在回发事件后保持当前活动选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22964301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
asp.net bootstrap Keep current active tab after post-back event
提问by Djama
I have the following asp.net aspx code
我有以下 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>
This script code keeps the active tab after post-back event when i click on the LinkButton
当我单击 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>
NB: This code works fine only when i reload the current page. It keeps the current tab focus. but when u click on the Link Button, it takes me back to the default tab.
注意：只有当我重新加载当前页面时，此代码才能正常工作。它保持当前选项卡的焦点。但是当您单击“链接”按钮时，它会将我带回默认选项卡。
How can make this code also work on the post back event of any controls.
如何使此代码也适用于任何控件的回发事件。
Note: i took this example from the stack post : How do I keep the current tab active with twitter bootstrap after a page reload?. This solution has been posted by: @koppor.
注意：我从堆栈帖子中获取了这个示例：如何在页面重新加载后使用 twitter bootstrap 保持当前选项卡处于活动状态？. 此解决方案已由@koppor 发布。
Any helps
任何帮助
回答by Bankyiie
Not familiar with jQuery so i sought an asp.net solution when i had this problem. I solved this problem by altering the a href in the Lists and replaced with asp:linkbutton. Then i also went to the divs containing the tabs and added runat = "server" to each one, also added ID="Tab1" , Tab2 and so on. Then on the code behind for the linkbuttons i added the following code
不熟悉 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"
For the tab you want to be active you change the attribute to tab-pane active. This way when the linkbutton is clicked only the tab you want to be active is active and on postback because these controls are now server side you will remain on the active tab.
对于要激活的选项卡，将属性更改为选项卡窗格活动。这样，当单击链接按钮时，只有您想要激活的选项卡处于活动状态并且在回发时，因为这些控件现在是服务器端，您将保留在活动选项卡上。
回答by oyin
I tried your script and it solved one of my problems, i added this code to my submit button
我尝试了你的脚本，它解决了我的一个问题，我将此代码添加到我的提交按钮
Response.Redirect("Settings.aspx#step2");
Response.Redirect("Settings.aspx#step2");
Hope it works for yours
希望它对你有用
