如何在asp.net中使用bootstrap製作選項卡控件

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> 

的JavaScript

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