如何在按钮单击时从第一个div选项卡重定向到另一个div选项卡 [英] How to redirect to another div tab from 1st div tab on button click

问题描述

大家好，



我的页面有几个div作为标签。加载页面时，只应启用第一个选项卡，应禁用其余选项。在第一个选项卡中填写详细信息并单击提交按钮后，应将其重定向到第二个选项卡，依此类推。我怎么能这样做。任何帮助都会非常感激。谢谢。



我尝试了什么：

Hi all,

I have page with several div as tabs . When the page is loaded only the first tab should be enabled rest should be disabled . After filling the details in first tab and on clicking the submit button it should be redirected to the 2nd tab and so on . How can I do this .Any help will be really appreciated .Thanks in advance.

What I have tried:

<div class="col-md-6"  style="width:100%;margin-top:20px">
            <div class="tab" 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" runat="server" enableviewstate="false" 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"  runat="server" enableviewstate="false" class="tab-pane fade" id="Section9">
                
   <table  width="100%" align="center" >
        <tr><td colspan="4">
   
        <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 -->
</div>

推荐答案

此代码复制服务器端...

This code copy server-side...

protected void Page_Load(object sender, EventArgs e)
   {
       Section8.Visible = false;
       Section9.Visible = false;
   }
   protected void but_Submit_Click(object sender, EventArgs e)
   {
       Section7.visible = false;
       Section8.Visible = true;
   }
   protected void Button6_Click(object sender, EventArgs e)
   {
       Section7.visible = false;
       Section9.Visible = true;
   }

这篇关于如何在按钮单击时从第一个div选项卡重定向到另一个div选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！