Bootstrap标签页分步切换实现求助：仅首标签加载激活

Hey there! I see the core issue here—you’re trying to use jQuery UI Tabs syntax with Bootstrap Tabs, which don’t share the same API. Bootstrap relies on class names and data attributes rather than the .tabs() method you’re using. Plus, since your buttons are ASP.NET server controls, we need to handle postbacks to keep the tab state intact. Let’s fix this step by step.

Step 1: Understand the Bootstrap Tab System #

Bootstrap tabs use:

• .active class on the <li> tab and corresponding .tab-pane to show active content
• .disabled class on <li> to visually disable tabs (but we need extra JS to prevent clicks)
• data-toggle="tab" to trigger tab switching

Step 2: Initial Setup (Disable Inactive Tabs on Page Load) #

First, update your tab markup to add the .disabled class to inactive tabs, and ensure proper aria-controls values:

<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="Section7" role="tab" data-toggle="tab">Registration</a></li>
      <li role="presentation" class="disabled"><a href="#Section8" aria-controls="Section8" role="tab" data-toggle="tab">Financially Personal Details</a></li>
      <li role="presentation" class="disabled"><a href="#Section9" aria-controls="Section9" role="tab" data-toggle="tab">Confirmation</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content tabs">
      <!-- Registration Tab -->
      <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>
                  <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>
      <!-- Financially Personal Details Tab -->
      <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>
      <!-- Confirmation Tab -->
      <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>
      </div>
    </div>
  </div>
</div>

Step 3: JavaScript to Handle Tab Navigation & Disabled States #

Since we’re using ASP.NET server buttons, we have two approaches depending on whether you need server-side processing:

Option 1: Client-Side Only (No Postback) #

If you don’t need to run server-side logic on button clicks, add OnClientClick="return false;" to your buttons and use this JS:

$(document).ready(function() {
  // Block clicks on disabled tabs
  $('.nav-tabs li.disabled a').on('click', function(e) {
    e.preventDefault();
    return false;
  });

  // Switch to Financial Details tab after Registration submit
  $('#<%= but_Submit.ClientID %>').click(function() {
    // Disable current tab
    $('.nav-tabs li.active').addClass('disabled').removeClass('active');
    // Enable and activate next tab
    $('.nav-tabs li:eq(1)').removeClass('disabled').addClass('active').find('a').tab('show');
  });

  // Switch to Confirmation tab after Financial Details submit
  $('#<%= Button6.ClientID %>').click(function() {
    $('.nav-tabs li.active').addClass('disabled').removeClass('active');
    $('.nav-tabs li:eq(2)').removeClass('disabled').addClass('active').find('a').tab('show');
  });
});

Option 2: With Server-Side Postback #

If you need to run server-side logic (like saving form data), update your code-behind to register script that updates the tab state after postback:

C# Code-Behind

protected void but_Submit_Click(object sender, EventArgs e)
{
    // Your server-side logic here (save registration data)
    
    // Register script to switch to Financial Details tab
    ScriptManager.RegisterStartupScript(this, GetType(), "SwitchToFinancialTab", 
        "$(function() { " +
        "$('.nav-tabs li.active').addClass('disabled').removeClass('active'); " +
        "$('.nav-tabs li:eq(1)').removeClass('disabled').addClass('active').find('a').tab('show'); " +
        "});", true);
}

protected void but_Submit1_Click(object sender, EventArgs e)
{
    // Your server-side logic here (save financial data)
    
    // Register script to switch to Confirmation tab
    ScriptManager.RegisterStartupScript(this, GetType(), "SwitchToConfirmationTab", 
        "$(function() { " +
        "$('.nav-tabs li.active').addClass('disabled').removeClass('active'); " +
        "$('.nav-tabs li:eq(2)').removeClass('disabled').addClass('active').find('a').tab('show'); " +
        "});", true);
}

protected void but_Submit2_Click(object sender, EventArgs e)
{
    // Your server-side logic here (save confirmation data)
    // Optional: Show success message or redirect
}

Corresponding Client-Side JS

$(document).ready(function() {
  // Block clicks on disabled tabs
  $('.nav-tabs li.disabled a').on('click', function(e) {
    e.preventDefault();
    return false;
  });
});

Key Notes #

• Bootstrap tabs don’t use jQuery UI’s .tabs() method—forget about enable, select, or disabled options from jQuery UI.
• ASP.NET server buttons trigger postbacks, so you need to either prevent them (if no server logic) or use ScriptManager to update the tab state after postback.
• The .disabled class in Bootstrap only styles the tab as disabled—you need the extra click handler to actually prevent navigation.

内容的提问来源于stack exchange，提问作者Ann Sara