在回发引导选项卡后激活当前选项卡

时间:2016-05-26 06:04:37

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

我在我的asp.net项目中使用bootstrap选项卡,Tabs工作正常,但当用户点击任何按钮或发生任何回发时,

第一个标签被选中。

我尝试使用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";
}

2 个答案:

答案 0 :(得分: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> 

答案 1 :(得分:1)

按此顺序添加脚本引用(位于页面顶部):

  1. Bootstrap CSS首先
  2. 的jQuery
  3. bootstrap.js
  4. <强> 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>