Question

我正在使用Bootstrap标签。我有3个Bootstrap选项卡和里面标签我有一个按钮。在页面加载期间，我只需要激活第一个选项卡，其余部分应该被禁用。然后单击第一个选项卡上的提交按钮将停用第一个选项卡并移动到下一个选项卡，依此类推。我一直在搜索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();
    });

}）;

在Bootstrap选项卡之间切换

1 个答案: