在回發引導程序選項卡之后使當前選項卡處於活動狀態

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