[英]asp.net bootstrap Keep current active tab after post-back event
我有以下 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>
注意:只有當我重新加載當前頁面時,此代碼才能正常工作。 它保持當前選項卡的焦點。 但是當您單擊“鏈接”按鈕時,它會將我帶回默認選項卡。
如何使此代碼也適用於任何控件的回發事件。
注意:我從堆棧帖子中獲取了這個示例: 如何在頁面重新加載后使用 twitter bootstrap 保持當前選項卡處於活動狀態? . 此解決方案已發布:@koppor。
任何幫助
不熟悉 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"
對於要激活的選項卡,將屬性更改為選項卡窗格活動。 這樣,當單擊鏈接按鈕時,只有您想要激活的選項卡處於活動狀態並且在回發時,因為這些控件現在是服務器端,您將保留在活動選項卡上。
我嘗試了你的腳本,它解決了我的一個問題,我將此代碼添加到我的提交按鈕
Response.Redirect("Settings.aspx#step2");
希望它對你有用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.