Member 12926744 Ответов: 0

Невозможно переключаться между вкладками bootstrap

Всем Привет,
Мне нужно переключаться между вкладками 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");

0 Ответов