技术咨询：Web Forms中是否可使用Tabs组件？

Web Forms完全支持Tabs组件，下面给你几种实用的实现方式，适合新手快速上手：

1. 使用ASP.NET AJAX Control Toolkit（官方推荐） #

这是最贴合Web Forms生态的方案，步骤如下：

• 先通过NuGet安装AjaxControlToolkit包
• 在ASPX页面顶部注册控件：

  <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
  

• 编写Tabs代码示例：

  <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
      <ajaxToolkit:TabPanel runat="server" HeaderText="个人信息">
          <ContentTemplate>
              <asp:TextBox ID="txtName" runat="server" placeholder="输入姓名"></asp:TextBox>
              <asp:TextBox ID="txtEmail" runat="server" placeholder="输入邮箱"></asp:TextBox>
          </ContentTemplate>
      </ajaxToolkit:TabPanel>
      <ajaxToolkit:TabPanel runat="server" HeaderText="项目设置">
          <ContentTemplate>
              <asp:DropDownList ID="ddlTheme" runat="server">
                  <asp:ListItem Text="浅色主题" Value="light"></asp:ListItem>
                  <asp:ListItem Text="深色主题" Value="dark"></asp:ListItem>
              </asp:DropDownList>
          </ContentTemplate>
      </ajaxToolkit:TabPanel>
  </ajaxToolkit:TabContainer>
  

  这种方式自带回发状态保持，无需额外处理Tab切换后的页面状态。

2. 原生HTML+CSS+JavaScript实现（无依赖） #

如果不想引入第三方控件，自己手写轻量Tabs：

• ASPX页面中的HTML结构：

  <div class="tab-container">
      <div class="tab-buttons">
          <button class="tab-btn active" onclick="switchTab(0)">个人信息</button>
          <button class="tab-btn" onclick="switchTab(1)">项目设置</button>
      </div>
      <div class="tab-content active" id="tab0">
          <asp:TextBox ID="txtNameNative" runat="server" placeholder="输入姓名"></asp:TextBox>
      </div>
      <div class="tab-content" id="tab1">
          <asp:DropDownList ID="ddlThemeNative" runat="server">
              <asp:ListItem Text="浅色主题" Value="light"></asp:ListItem>
          </asp:DropDownList>
      </div>
  </div>
  

• 添加CSS样式：

  .tab-buttons .tab-btn {
      padding: 8px 16px;
      border: none;
      background-color: #f1f1f1;
      cursor: pointer;
  }
  .tab-buttons .tab-btn.active {
      background-color: #ccc;
  }
  .tab-content {
      display: none;
      padding: 16px;
      border: 1px solid #ccc;
  }
  .tab-content.active {
      display: block;
  }
  

• 编写JavaScript切换逻辑：

  function switchTab(index) {
      // 切换按钮状态
      var btns = document.querySelectorAll('.tab-btn');
      var contents = document.querySelectorAll('.tab-content');
      btns.forEach((btn, i) => {
          btn.classList.toggle('active', i === index);
          contents[i].classList.toggle('active', i === index);
      });
  }
  

  若需要回发时保持Tab状态，可把当前选中的索引存在ViewState或隐藏域中，页面加载时读取并切换。

3. 使用jQuery UI Tabs #

如果项目已引入jQuery，这种方式更简洁：

• 确保页面引入jQuery和jQuery UI的脚本与样式（直接添加到项目中即可）
• 编写HTML结构：

  <div id="tabs">
      <ul>
          <li><a href="#tabs-1">个人信息</a></li>
          <li><a href="#tabs-2">项目设置</a></li>
      </ul>
      <div id="tabs-1">
          <asp:TextBox ID="txtNameJquery" runat="server" placeholder="输入姓名"></asp:TextBox>
      </div>
      <div id="tabs-2">
          <asp:DropDownList ID="ddlThemeJquery" runat="server">
              <asp:ListItem Text="浅色主题" Value="light"></asp:ListItem>
          </asp:DropDownList>
      </div>
  </div>
  

• 初始化Tabs：

  $(function() {
      $("#tabs").tabs();
  });
  

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