Switching between Bootstrap tabs

Question

I am working on Bootstrap tabs . I have 3 Bootstrap tabs and inside the tabs I have a button . During Page load I need only the first tab to be activated and the remaining should be disabled .Then the click of a submit button on the first tab will deactivate the first tab and move to the next and so on .I have been searching through the posts on Stack Overflow but nothing I try seems to work. Any help will be really appreciated .Thanks in Advance. Here is my code: What I have tried

<div class="col-md-6"  style="width:100%;margin-top:20px">
        <div class="tab" id="tabs1" role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active" ><a href="#Section7" aria-controls="home" role="tab" data-toggle="tab">Registration</a></li>
                 <li role="presentation"  ><a href="#Section8"  aria-controls="home" role="tab"  data-toggle="tab">Financially Personal Details</a></li>
                <li role="presentation"  ><a href="#Section9" aria-controls="home" role="tab" data-toggle="tab">Confirmation</a></li>
            </ul>
            <!-- Tab panes -->
             <div class="tab-content tabs">
                <!--  Information -->
                 <div  role="tabpanel" class="tab-pane fade in active"  id="Section7">
                <table  width="100%" align="center" >
    <tr><td colspan="4">
    <table width="100%">
    <tr><td ><label  > Name  </label><asp:TextBox  ID="txt_Name"  runat="server" Width="200px"></asp:TextBox>
        </td><td align="left"><label  >Contact Number </label>
        <asp:TextBox ID="txt_Cnumber" TabIndex="8" runat="server"></asp:TextBox>
        </td>
        </tr>
</tr>
<tr>
     <td><asp:Button ID="but_Submit" runat="server" Text="Register" OnClick="but_Submit_Click" TabIndex="23"></asp:Button>
        </td>
        </tr>
        </table>
        </td>
        </tr>
   </table>
   </div>
   <!--End  Information -->
                 <!-- Financially  Party -->
                 <div role="tabpanel" class="tab-pane fade" id="Section8">
  <table  width="100%" align="center" >
    <tr><td colspan="4">

     <table width="100%"  class="w3-card w3-table w3-small">
    <tr><td ><label  >Bearer Name</label>
    <asp:TextBox  ID="txt_fbname"  runat="server"></asp:TextBox>
      </td><td align="left"><label  >Relation to Patient  </label>
      <asp:TextBox  ID="txt_rtp" runat="server"></asp:TextBox>
         </td>
        </tr>
         <tr>
     <td><asp:Button ID="Button6" runat="server" Text="SAVE" OnClick="but_Submit1_Click" TabIndex="23"></asp:Button>
        </td>
</tr>
        </table>
        </td>
        </tr>
   </table>
  </div>

                 <!--End Financially Responsible Party -->
                 <!--Emergency Contact -->
                 <div role="tabpanel" class="tab-pane fade" id="Section9">

    <table width="100%"  class="w3-card w3-table w3-small">
    <tr><td ><label  >Contact Name  </label><asp:TextBox ID="txt_emname"  runat="server" Width="200px"></asp:TextBox>
      </td><td align="left"><label  >Relation to Patient  </label>
     <asp:TextBox ID="txt_emrtp" runat="server" Width="200px"></asp:TextBox>
         </td>
        </tr>
        <tr>
     <td><asp:Button ID="Button5" runat="server" Text="SAVE" OnClick="but_Submit2_Click" TabIndex="23"></asp:Button>
        </td>
</tr>
        </table>
        </td>
        </tr>
   </table>
                       </div>
                 <!--End Emergency Contact -->

here is my js :

$(document).ready(function () {
        var $tabs = $('#tabs1').tabs({ selected: 0, disabled: [1, 2] });
        $("#but_Submit").click(function () {
            $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);
        });
        $("#Button6").click(function () {
            $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);
        });
    });

score 0 · Answer 1 · answered May 23 '18 at 16:34

Try with this

$(document).ready(function() {

    $('.tab-content div').hide();
    $('.tab-content div#Section7').show();
    $('.nav-tabs a').click(function(){ 
    var divid=$(this).attr('href');
        $('.tab-content div').hide();
        $(divid).show();
    });

});

Switching between Bootstrap tabs

1 Answers1