asp.net에서 부트 스트랩으로 탭 컨트롤을 만드는 방법

Question

여기 asp.net 응용 프로그램에서 부트 스트랩 탭 컨트롤을 구현하고 있습니다.

1) 다음을 클릭하고 다음 탭으로 이동합니다.

탭 컨트롤의 탭을 클릭하여 다음 탭으로 이동하거나 다음 버튼을 클릭하여 탭 컨트롤을 만들고 싶습니다. 탭 컨트롤의

<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> 

이미지 :

Answer 1

콘텐츠 divs 후 button을 작성하고이 버튼을 아래

<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'); 
} 

에 함수를 호출은 완벽한 솔루션

입니다 의 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> 

자바 스크립트

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