c# - 回发后保留 Bootstrap 选项卡#

Question

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

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

谁能告诉我如何在回发后保留这个 Bootstrap ？

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 值切换到 之前打开的最后一个选项卡>回发。

   $(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