在 Bootstrap 选项卡之间切换

Question

我正在开发 Bootstrap 选项卡。我有 3 个引导选项卡，在里面 标签 我有一个按钮。在页面加载期间，我只需要激活第一个选项卡，其余的应禁用。然后单击第一个选项卡上的提交按钮将停用第一个选项卡并移至下一个选项卡，依此类推。我一直在搜索Stack Overflow 上的帖子，但我尝试的任何方法似乎都不起作用。 任何帮助将不胜感激。在此先感谢。这是我的代码： What I have tried

<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" role="tablist">
                <li role="presentation" class="active" ><a href="#Section7" aria-controls="home" role="tab" data-toggle="tab">Registration</a></li>
                 <li role="presentation"  ><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" class="tab-pane fade in active"  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" class="tab-pane fade" 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 -->

这是我的 js：

$(document).ready(function () {
        var $tabs = $('#tabs1').tabs({ selected: 0, disabled: [1, 2] });
        $("#but_Submit").click(function () {
            $tabs.tabs('enable', 1).tabs('select', 1).tabs('disable', 0);
        });
        $("#Button6").click(function () {
            $tabs.tabs('enable', 2).tabs('select', 2).tabs('disable', 1);
        });
    });

Answer 1

Try with this   

$(document).ready(function() {

    $('.tab-content div').hide();
    $('.tab-content div#Section7').show();
    $('.nav-tabs a').click(function(){ 
    var divid=$(this).attr('href');
        $('.tab-content div').hide();
        $(divid).show();
    });

});