javascript - Make current tab active after postback bootstrap tabs - Stack Overflow

admin管理员组

文章数量:1429841

I am using bootstrap tabs in my asp project, Tabs are working fine but when the user clicks on any of the button or any postback occurs,

First tab get selected.

I tried hidden field with jquery but it's not working.

What am I missing kindly elaborate please.

Here is my code :

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

The button is placed in Education Details Tab, On the click event of that button , I added :

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

I am using bootstrap tabs in my asp project, Tabs are working fine but when the user clicks on any of the button or any postback occurs,

First tab get selected.

I tried hidden field with jquery but it's not working.

What am I missing kindly elaborate please.

Here is my code :

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

The button is placed in Education Details Tab, On the click event of that button , I added :

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

• javascript
• c#
• jquery
• asp
• twitter-bootstrap

Share Improve this question Follow asked May 26, 2016 at 6:04 Alina AnjumAlina Anjum 1,23066 gold badges3131 silver badges5757 bronze badges 5

• remove active class from your first <li> and use active class on <li> dynamically for open particular tab. – Sunil Kumar Commented May 26, 2016 at 6:14
• how can i use it dynamically – Alina Anjum Commented May 26, 2016 at 6:20
• you can use id on your <li> like <li id='personal'> and check your hidden field like below. like this : var selectedTab = $("#<%=hfTab.ClientID%>"); var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal"; $("#"+tabId ).addClass('active'); Hope it helps you – Sunil Kumar Commented May 26, 2016 at 6:26
• Could you post the html for the entire page?I tried re-creating your problem on my side but it's working 100%.So I want to see the entire page and code behind – Denys Wessels Commented May 26, 2016 at 6:37
• @DenisWessels have a look jsbin./supokoyoho/edit?html,js,output – Alina Anjum Commented May 26, 2016 at 6:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Add the script references in this order(at the top of the page):

1. Bootstrap CSS first
2. jQuery
3. bootstrap.js

Refrences:

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

Complete solution:

Copy and paste this code as is and it will work:

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

Change this line

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

to

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

You are selecting on basis of id dvTab which is not there.

Edit

As per your ments your jquery file is not added properly please add jquery and bootstrap in order. Also include these file at bottom of page.

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

本文标签： javascriptMake current tab active after postback bootstrap tabsStack Overflow