在回发引导选项卡后使当前选项卡处于活动状态答案

【问题标题】：Make current tab active after postback bootstrap tabs在回发引导选项卡后使当前选项卡处于活动状态
【发布时间】：2016-05-26 06:04:37
【问题描述】：

我在我的 asp.net 项目中使用引导选项卡，选项卡工作正常，但是当用户单击任何按钮或发生任何回发时，

第一个标签被选中。

我尝试使用 jquery 隐藏字段，但它不起作用。

我错过了什么请详细说明。

这是我的代码：

     <script type="text/javascript">
              $(document).ready(function () {
                  var selectedTab = $("#<%=hfTab.ClientID%>");
                  var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
                 $('#dvTab a[href="#' + tabId + '"]').tab('show');
                 $("#dvTab a").click(function () {
                     selectedTab.val($(this).attr("href").substring(1));
                 });
             });
        </script>
                                        <div id="dvTab">
<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
    <li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
    <li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
    <li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
    <li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
    <li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>                      
</ul>
<div class="tab-content">
    <div id="personal" role="tabpanel" class="tab-pane active">                                       
         ...                                          
    </div>
    <div id="pf" role="tabpanel" class="tab-pane">                                           
        ..
    </div>
    <div id="gf" role="tabpanel" class="tab-pane">
      ..
    </div>
    <div id="edu" role="tabpanel" class="tab-pane">
      <asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />    
    </div>
</div>                                                                       
</div>                               
      <asp:HiddenField ID="hfTab" runat="server" />

该按钮放置在教育详细信息选项卡中，在该按钮的单击事件中，我添加了：

protected void btn_AddEdu_Click(object sender, EventArgs e)
{
 hfTab.Value = "edu";
}

【问题讨论】：

从您的第一个 <li> 中删除 active 类，并在 <li> 上动态使用 active 类以打开特定选项卡。
我如何动态使用它
您可以在您的<li> 上使用id，例如<li id='personal'>，并检查您的隐藏字段，如下所示。像这样：var selectedTab = $("#<%=hfTab.ClientID%>"); var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal"; $("#"+tabId ).addClass('active');希望对你有帮助
您能发布整个页面的 html 吗？我尝试在我这边重新创建您的问题，但它 100% 有效。所以我想查看整个页面和背后的代码
@DenisWessels 看看jsbin.com/supokoyoho/edit?html,js,output

标签： javascript c# jquery asp.net twitter-bootstrap

【解决方案1】：

按此顺序添加脚本引用（在页面顶部）：

首先引导 CSS
jQuery
bootstrap.js

参考：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

完整解决方案：

按原样复制并粘贴此代码，它将起作用：

<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var selectedTab = $("#<%=hfTab.ClientID%>");
            var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                selectedTab.val($(this).attr("href").substring(1));
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div id="dvTab">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active"><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal Information</a></li>
                <li><a href="#pf" aria-controls="pf" role="tab" data-toggle="tab">PF Nominee</a></li>
                <li><a href="#gf" aria-controls="gf" role="tab" data-toggle="tab">GF Nominee</a></li>
                <li><a href="#edu" aria-controls="edu" role="tab" data-toggle="tab">Education Details</a></li>
                <li><a href="#fam" aria-controls="fam" role="tab" data-toggle="tab">Family Details</a></li>
                <li><a href="#emphist" aria-controls="emphist" role="tab" data-toggle="tab">Employment History</a></li>
            </ul>
            <div class="tab-content">
                <div id="personal" role="tabpanel" class="tab-pane active">
                    ...                                          
                </div>
                <div id="pf" role="tabpanel" class="tab-pane">
                    ..
                </div>
                <div id="gf" role="tabpanel" class="tab-pane">
                    ..
                    G Nom NOm
                </div>
                <div id="edu" role="tabpanel" class="tab-pane">
                    <asp:Button runat="server" ID="btn_AddEdu" Text="Add Degree/Certificate" OnClick="btn_AddEdu_Click" /><br />
                </div>
            </div>
        </div>
         <asp:HiddenField ID="hfTab" runat="server" />   
    </form>
</body>

【讨论】：

在部分添加脚本。看看我发布的示例。完全照做

【解决方案2】：

改变这一行

$('#dvTab a[href="#' + tabId + '"]').tab('show');

到

$('.nav-tabs a[href="#' + tabId + '"]').tab('show');

您是根据不存在的id dvTab 选择的。

编辑

根据您的 cmets，您的 jquery 文件未正确添加，请按顺序添加 jquery 和 bootstrap。还要在页面底部包含这些文件。

<script src="Scripts/jquery-2.1.3.min.js"></script> 
<script src="Scripts/bootstrap.js"></script>

【讨论】：

@AlinaAnjum 您是否将每个选项卡的值存储在单独的 button_click 事件中？
问题不是不同的按钮，现在我只是在提到的标签中添加了一个按钮，并且标签在回发后失去了当前状态
@AlinaAnjum 我认为您的问题是您的 javascript 代码不起作用，因为我复制了相同的示例并且它不起作用，因为我收到错误 .tabs() is not a function。有错误请查看浏览器控制台？
如果当前代码有任何错误，请建议我可能的解决方案
你检查过浏览器控制台吗？