Question

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

<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

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

在您的网页上添加新的HiddenField，并将其值设置为需要显示的第一个tab：
```
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
```
在您定义的click替换tabs的每个HiddenField函数中，将tab值设置为实际点击的document.getElementById('<%=hidTAB.ClientID %>').value = "image";。
```
jQuery
```
在document.ready HiddenField功能上，使用Postback值替换为$(document).ready( function(){ var tab = document.getElementById('<%= hidTAB.ClientID%>').value; $( '#myTab a[href="' + tab + '"]' ).tab( 'show' ); });之前打开的最后一个标签。
```
{{1}}
```

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

Answer 2

请试试这个

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
 <ul class="nav nav-tabs" role="tablist">
    <li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
    </a></li>
    <li><a href="#employment" aria-controls="employment" role="tab" data-toggle="tab">Employment</a></li>
 </ul>
<!-- Tab panes -->
 <div class="tab-content" style="padding-top: 20px">
    <div role="tabpanel" class="tab-pane active" id="personal">
        This is Personal Information Tab
    </div>
    <div role="tabpanel" class="tab-pane" id="employment">
        This is Employment Information Tab
    </div>
 </div>
 </div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
    $("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>

Answer 3

经过相当长的时间尝试引导选项卡..我决定更改为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 4

在上述答案中：必须按如下所示修改文档准备功能

  $(document).ready(function () {
        var selectedTab = $("#<%=hidTAB.ClientID%>");
        var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
        $('#myTab a[href="#' + tabId + '"]').tab('show');
        $("#myTab a").click(function () {
            selectedTab.val($(this).attr("href").substring(1));
        });
    });

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

4 个答案: