回发后保持引导选项卡c#

Question

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

<script type="text/javascript">

                $('#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');
                })

    </script>

谁能告诉我在回发后如何保留这个引导程序？

Answer 1

嗯，我已经遇到了这个问题，我是这样解决的：

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

   <asp:HiddenField ID="hidTAB" runat="server" Value="image" />
   

2. 在您定义的每个 click 函数以交替 tabs 时，将 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' );
   });
   

Here's the Bootstrap Tab Documentation 和 here's the jQuery Ready documentation

Answer 2

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

我设法找到了solution

我非常感谢提供此解决方案的人。 在这个解决方案中，它使用 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/";
});
});

Answer 3

参考以上思路，这里是我的做法（包含完整代码）

在您的 HTML 页面中，在

部分放置

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

在

部分放置一个隐藏字段

<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />

在

部分也有Bootstrap 3.0相关代码

<ul class="nav nav-tabs" id="myTabs">
  <li><a href="#tab1" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" data-toggle="tab">another page</a></li>
</ul>

不要将任何选项卡设置为活动状态（这是由 Hiddenfield 的初始 Value="#tab1" 设置的）。

然后给tab2 DIV添加一个按钮

像这样：

<div class="tab-pane" id="tab2">
  <asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
  <asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>

最后在后面添加你的c#代码来设置隐藏字段的值

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

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

希望这对某人有所帮助。

Trev.