回发c＃后保留引导选项卡

我目前在我的fileupload回发后保留引导选项卡时遇到问题。 代码如下

 $('#myTab a[href="#image"]').click(function (e) { e.preventDefault(); $("#myTab").removeClass("active"); $(this).addClass('active'); $(this).tab('show'); }) $('#myTab a[href="#information"]').click(function (e) { e.preventDefault(); $("#myTab").removeClass("active"); $(this).addClass('active'); $(this).tab('show'); }) $('#myTab a[href="#password"]').click(function (e) { e.preventDefault(); $("#myTab").removeClass("active"); $(this).addClass('active'); $(this).tab('show'); }) $('#myTab a[href="#account"]').click(function (e) { e.preventDefault(); $("#myTab").removeClass("active"); $(this).addClass('active'); $(this).tab('show'); })  

任何人都可以启发我如何在回发后保留这个引导程序？

Answer 1

好吧，我已经有了这个问题，我这样解决了：

1. 在页面上包含一个新的HiddenField ，并将其值设置为需要显示的第一个tab ：

2. 在您定义用于交替tabs每个clickfunction上，将HiddenField值设置为单击的实际tab 。

    document.getElementById('<%=hidTAB.ClientID %>').value = "image"; 

3. 在jQuery document.ready函数上，使用HiddenField值替换Postback之前打开的最后一个选项卡。

    $(document).ready( function(){ var tab = document.getElementById('<%= hidTAB.ClientID%>').value; $( '#myTab a[href="' + tab + '"]' ).tab( 'show' ); }); 

这是Bootstrap选项卡文档 ， 这里是jQuery Ready文档

Answer 2

参考上面的想法这里我是如何做到的（包括完整代码）

在您的HTML页面中，在部分中

在部分放一个隐藏字段

并且在部分中还有Bootstrap 3.0相关代码

 
 
Home page
 
another page
  

不要将任何选项卡设置为活动（这由Hiddenfield的初始值=“＃tab1”设置）。

然后在tab2 DIV上添加一个按钮

像这样：

 
  (note this example is for uploading a file)   

最后添加你的c＃代码来设置hiddenfield的值

 protected void FileUploadButton_Click(object sender, EventArgs e) { hidTAB.Value = "#tab2"; } 

在回发时，JQuery将读取隐藏字段中的新值并显示tab2 🙂

希望这有助于某人。

崔佛。

Answer 3

请试试这个

    
 
  
 
Personal 
 
Employment
 
  
 
 This is Personal Information Tab 
 
 This is Employment Information Tab 
 
 
   
  

Answer 4

经过相当长的时间尝试引导选项卡..我决定更改为jquery选项卡。 首先，jquery选项卡也给出了我在这种情况下遇到的相同问题..但经过大量努力寻找解决方案并在代码后尝试代码。

我设法找到了解决方案

我非常感谢提供此解决方案的人。 在这个解决方案中，它使用sessionStorage（对我来说，它是我从未听说过的新东西）和代码

 $(document).ready(function () { var currentTabIndex = "0"; $tab = $("#tabs").tabs({ activate : function (e, ui) { currentTabIndex = ui.newTab.index().toString(); sessionStorage.setItem('tab-index', currentTabIndex); } }); if (sessionStorage.getItem('tab-index') != null) { currentTabIndex = sessionStorage.getItem('tab-index'); console.log(currentTabIndex); $tab.tabs('option', 'active', currentTabIndex); } $('#btn-sub').on('click', function () { sessionStorage.setItem("tab-index", currentTabIndex); //window.location = "/Home/Index/"; }); });