如何使用 dijit.layout.TabContainer 指定选定的选项卡？答案

【问题标题】：How do I specify the selected tab with dijit.layout.TabContainer?如何使用 dijit.layout.TabContainer 指定选定的选项卡？
【发布时间】：2009-06-24 00:18:11
【问题描述】：

如何在启动时指定选中的选项卡？
如何以编程方式选择选项卡？

【问题讨论】：

标签： dojo tabcontainer

【解决方案1】：

HTML - 使用 selected 属性。

<div id="tabContainer" dojoType="dijit.layout.TabContainer" 
     tabStrip="true" style="width: 100%; height: 20em;">
    <div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1">Tab 1</div>
    <div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2"
         selected="true">Selected tab 2</div>
</div>

JavaScript - 在 TabContainer 小部件上使用 selectChild 方法。

var cp = new dijit.layout.ContentPane({
                     title: 'Tab title',                       
                     content: 'Selected tab...'
                  });
var tc = dijit.byId("tabContainer");
tc.addChild(cp);
tc.selectChild(cp);

您可以在此处找到更多示例：TabContainer Demo

警告！！！此演示来自夜间构建。并非所有功能都包含在 1.3.2 版本中。

【讨论】：

这个答案不完整。您描述了如何在启动时设置选定的选项卡，但发帖人还询问了如何以编程方式切换选项卡。该解决方案有点奇怪，因为 selectChild() 需要一个小部件，而不是数字，因此您需要访问要选择的内容窗格的对象。在构建窗格时这很容易，但要在运行时任意执行，您必须先获取您想要的孩子，然后告诉 tabContainer 选择它。我已将此添加到您的答案中。

【解决方案2】：

您可以使用 selected 属性指定要在启动时显示的选项卡。

new dijit.layout.ContentPane({title: "My Tab Title",
content: dojo.byId("MyContent"),selected:true});

TabContainer 启动后，您可以使用带有 id 或小部件引用的 selectChild。请注意，在 TabContainer 启动之前调用 selectChild 会导致错误。

【讨论】：