动态生成jQuery UI标签页：获取首个标签名称及选中状态问题

我来帮你梳理下这个问题的解决思路，咱们逐个击破核心痛点：

1. 初始化脚本与样式/API调用的矛盾 #

你提到的「取消初始化第一行丢样式、注释后调用API报错」，本质是初始化时机不对或者Repeater生成的DOM结构不符合jQuery UI Tabs的标准要求：

• 首先要确保jQuery UI的CSS文件在所有脚本之前引入，顺序不能乱：

  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
  

• 必须先调用.tabs()完成初始化，才能使用.tabs('option',...)这类API——否则jQuery找不到Tabs实例必然报错。至于样式丢失，大概率是Repeater生成的HTML结构不达标，标准Tabs结构应该是这样的（你的Repeater要生成类似嵌套关系）：

  <div id="tabs">
    <ul>
      <li><a href="#tab-1">标签1</a></li>
      <li><a href="#tab-2">标签2</a></li>
    </ul>
    <div id="tab-1">内容1</div>
    <div id="tab-2">内容2</div>
  </div>
  

  检查下Repeater的模板是否生成了正确的<ul>嵌套和对应ID的内容面板。

2. 稳定获取首个标签的名称 #

只要Tabs初始化完成（或DOM就绪后），就能通过jQuery选择器轻松拿到第一个标签的文本，不管是首次加载还是回发：

// 首次加载用document.ready，回发用ASP.NET自带的pageLoad
$(document).ready(function() {
  initTabs();
});

function pageLoad() {
  initTabs();
}

function initTabs() {
  // 先初始化Tabs
  var $tabs = $("#tabs").tabs();
  // 获取第一个标签的文本
  var firstTabName = $tabs.find(".ui-tabs-nav li:first-child a").text();
  console.log("首个标签名称：", firstTabName);
  // 这里可以把名称存到HiddenField或直接用于业务逻辑
}

3. 页面加载默认选第一个+回发保持选中状态 #

结合你的需求，我整理了一套完整的实现方案（配合HiddenField存储选中索引）：

<!-- 用HiddenField存选中的标签索引，回发后读取 -->
<asp:HiddenField ID="hfSelectedTab" runat="server" Value="0" />

<!-- Repeater生成Tabs结构 -->
<div id="tabs">
  <asp:Repeater ID="rptTabs" runat="server">
    <HeaderTemplate>
      <ul>
    </HeaderTemplate>
    <ItemTemplate>
      <li><a href="#tab-<%# Eval("TabId") %>"><%# Eval("TabName") %></a></li>
    </ItemTemplate>
    <FooterTemplate>
      </ul>
    </FooterTemplate>
  </asp:Repeater>
  
  <asp:Repeater ID="rptTabContents" runat="server">
    <ItemTemplate>
      <div id="tab-<%# Eval("TabId") %>">
        <%# Eval("TabContent") %>
      </div>
    </ItemTemplate>
  </asp:Repeater>
</div>

<script>
$(document).ready(function() {
  initTabs();
});

// ASP.NET回发后自动触发这个函数
function pageLoad() {
  initTabs();
}

function initTabs() {
  var $tabs = $("#tabs");
  // 初始化Tabs，同时处理选中状态
  $tabs.tabs({
    // 首次加载默认选中第一个（索引0），回发时读取HiddenField的值
    active: parseInt($("#<%= hfSelectedTab.ClientID %>").val()),
    // 切换标签时把当前索引存到HiddenField
    activate: function(event, ui) {
      $("#<%= hfSelectedTab.ClientID %>").val(ui.newTab.index());
    }
  });
  
  // 稳定获取首个标签名称
  var firstTabName = $tabs.find(".ui-tabs-nav li:first-child a").text();
  // 这里可以执行你需要的业务操作
  console.log("第一个标签：", firstTabName);
}
</script>

这套方案的优势：

• 不管首次加载还是回发，都能正确初始化Tabs，不会丢失样式
• 回发后自动保持之前选中的标签页
• 能稳定获取到第一个标签的名称

最后小提醒：确保Repeater绑定的数据是正确的，生成的HTML结构符合jQuery UI Tabs的要求，另外jQuery和jQuery UI的版本要兼容，避免版本冲突导致的奇怪问题。

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