Click here to Skip to main content
15,916,463 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,
I need to switch between Bootstrap tabs on a button click in each tab .However Its not working .I have been trying various ways but couldn't find any help.Any help will be really appreciated. Thanks in Advance.

Below is my code.It is working fine .But after button click it doesn't switch to the next tab.

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" id="TabList" role="tablist">
                 <li id="result1" role="presentation"  runat="server"><a href="#Section7" aria-controls="home" role="tab" data-toggle="tab">Registration</a></li>
                 <li id="result2" role="presentation"   runat="server" ><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" runat="server" 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" runat="server" 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 -->

This is my code behind :
    Page load :
                    result1.Attributes.Add("class", "active");
                    Section7.Attributes.Add("class", "tab-pane active");
                    //hide the employment tab (menu and content)
                    Section8.Attributes.Remove("class");
                    Section8.Attributes.Add("class", "tab-pane");
                    result2.Attributes.Remove("class");
                    result2.Attributes.Add("class", "nav nav-tabs");
Buttton_Click Event:
            result2.Attributes.Add("class", "active");
             Section8.Attributes.Add("class", "tab-pane active");
            //hide the personal tab (menu and content)
            Section7.Attributes.Remove("class");
            Section7.Attributes.Add("class", "tab-pane");
            result1.Attributes.Remove("class");
            result1.Attributes.Add("class", "nav nav-tabs");
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900