无法在Bootstrap选项卡之间切换

Question

我需要在每个标签的按钮点击之间切换Bootstrap标签。但是它不能正常工作。我一直在尝试各种方法，但找不到任何帮助。任何帮助都将非常感激。在此先感谢。

<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");

这是我的代码。它工作正常。但是点击按钮后它不会切换到下一个标签。