Question

我有这样的代码：

var enTabs = {
  "Layout": 0,
  "Edit": 1,
  "Stuff": 2
}

$("#tabs").tabs({
    activate: function (event, ui) {
        switch (ui.newTab.index()) {
            case enTabs.Layout:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Edit:
             // loads remote data, processes it, draws it to this tab;
            break;

            case enTabs.Stuff:
             // loads remote data, processes it, draws it to this tab;
            break;

        }
    }
}).tabs("option","disabled",[enTabs.Edit,enTabs.Stuff]);
console.log("active tab", $("#tabs").tabs("option","active")); // says "0"

根据jQuery“by design”语句（http://bugs.jqueryui.com/ticket/8735），首次绘制选项卡时不会处理activate事件;或者设置.tabs("option","active",enTabs.Layout)时，如果当前索引与您设置的选项/活动匹配，则激活不会触发，并且它初始化为零。

确保在第一次绘制标签时，为第一个（第0个）标签触发“激活”的最佳方法是什么，意识到我不想绑定到'创建'，因为我不想要在标签上加载数据，直到实际点击它们为止？

我无法做出

$("#tabs").tabs( "option", "active", -1 ).tabs( "option", "active", enTabs.Layout)

始终如一地工作。

Answer 1

你可以使用这样的东西

function loadTab(index) {
   switch (index) {
        case enTabs.Layout:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Edit:
         // loads remote data, processes it, draws it to this tab;
        break;

        case enTabs.Stuff:
         // loads remote data, processes it, draws it to this tab;
        break;

    } 
}
 $(function () {
      $("#tabs").tabs({
          create: function (event, ui) { loadTab(ui.tab.index()) },
          activate: function (event, ui) { loadTab(ui.newTab.index()) }
      });
 });

这里有一个类似的问题 JQuery UI tabs 1.10.0 activate is not called after creation

Answer 2

这是一种在页面加载时触发激活功能的方法：

<action name="start.do" class="com.xxx.IteratorKFCAction">
    <result name="SUCCESS">/WEB-INF/.../index.jsp</result>
</action>

阐释：

使用选项

初始化JQuery选项卡

$('#tabs') .tabs({ active: false, collapsible: true, activate: function(){console.log('Tab activated');} }) .tabs('option', 'active', 0) .tabs('option', 'collapsible', false); //需要使用选项active：false
collapsible:true //表示没有标签可见（全部已折叠）

然后，我们立即激活我们想要在pageload上看到的标签

active:false //此处标签0已激活，但可能是其他

最后我们删除了可折叠选项（如果你不想要它......）

.tabs('option', 'active', 0)

jqueryui选项卡（1.9.1）在加载时激活

2 个答案: