在回发引导程序选项卡之后使当前选项卡处于活动状态

Question

我在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" />

该按钮位于“教育详细信息”选项卡中，在该按钮的click事件上，我添加了：

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

Answer 1

更改此行

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

至

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

您正在基于不存在的id dvTab进行选择。

编辑

根据您的评论，您的jquery文件未正确添加，请按顺序添加jquery和bootstrap。 在页面底部也包括这些文件。

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

Answer 2

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

首先引导CSS
jQuery的
bootstrap.js

Refrences：

<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 个解决方案

解决方案1
1 2016-05-26 06:24:11

解决方案2
1 已采纳 2016-05-26 07:16:06

在回发引导程序选项卡之后使当前选项卡处于活动状态

问题描述

2 个解决方案

解决方案1 1 2016-05-26 06:24:11

解决方案2 1 已采纳 2016-05-26 07:16:06

解决方案1
1 2016-05-26 06:24:11

解决方案2
1 已采纳 2016-05-26 07:16:06