Comment faire un contrôle onglet avec bootstrap dans asp.net

Question

Ici, j'implémente le contrôle de tabulation bootstrap dans l'application asp.net.

1) Cliquez sur Suivant pour passer à l'onglet suivant.

Je souhaite que le contrôle onglet fonctionne en cliquant sur les onglets du contrôle Onglet pour passer à l'onglet suivant ou en cliquant sur le bouton Suivant.

<form id="form1" runat="server"> 
    <div class="container"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li> 
      <li><a data-toggle="tab" href="#professional">Professional Information</a></li> 
      <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div id="personal" class="tab-pane fade in active"> 

       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-12 col-md-12 col-lg-12"> 
          <div class="col-sm-4"> 
           <span class="Star-clr">*</span>First Name : 
          </div> 
          <div class="col-sm-8"> 
           <asp:TextBox ID="txtName" runat="server" placeholder="First Name"</asp:TextBox> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-12 col-md-12 col-lg-12"> 
          <div class="col-sm-2"> 
          </div> 
          <div class="col-sm-10" style="float: right"> 
           <asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div id="professional" class="tab-pane fade"> 
      </div> 

      <div id="accountinformation" class="tab-pane fade"> 
      </div> 
     </div> 
    </div> 
</form> 

Image de contrôle Tab:

Answer 1

Créer une button après votre contenu divs et fonction d'appel sur ce bouton

<input type="button" value="Next" onclick="ShowNextTab();" /> 

function ShowNextTab() { 
    if ($('.nav-tabs > .active').next('li').length == 0) //If you want to select first tab when last tab is reached 
     $('.nav-tabs > li').first().find('a').trigger('click'); 
    else 
     $('.nav-tabs > .active').next('li').find('a').trigger('click'); 
} 

Voici une solution complète

HTML

<form id="form1" runat="server"> 
    <div class="container"> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li> 
      <li><a data-toggle="tab" href="#professional">Professional Information</a></li> 
      <li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li> 
     </ul> 
     <div class="tab-content"> 
      <div id="personal" class="tab-pane fade in active"> 

       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-12 col-md-12 col-lg-12"> 
          <div class="col-sm-4"> 
           <span class="Star-clr">*</span>First Name : 
          </div> 
          <div class="col-sm-8"> 
           <asp:TextBox ID="txtName" runat="server" placeholder="First Name"></asp:TextBox>//close tag is missing 

          </div> 
         </div> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="row"> 
         <div class="col-sm-12 col-md-12 col-lg-12"> 
          <div class="col-sm-2"> 
          </div> 
          <div class="col-sm-10" style="float: right"> 


           <asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" /> 


          </div> 
         </div> 
        </div> 
       </div> 

      </div> 
      <div id="professional" class="tab-pane fade"> 

      </div> 
      <div id="accountinformation" class="tab-pane fade"> 
      </div> 

      <input type="button" value="Next" onclick="ShowNextTab();" /> 
      <input type="button" value="Prev" onclick="ShowPrevTab();" /> 
     </div> 

    </div> 
</form> 

JavaScript

function ShowNextTab() { 
     $('.nav-tabs > .active').next('li').find('a').trigger('click'); 
    } 
    function ShowPrevTab() { 
     $('.nav-tabs > .active').prev('li').find('a').trigger('click'); 
    }