How do I specify the selected tab with dijit.layout.TabContainer?

Question

• How do you specify the selected tab at startup?
• How do you programmatically select tabs?

Answer 1

You can specify the tab to display at startup with the selected attribute.

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

After the TabContainer startup, you can use selectChild with the id or the reference to the widget. Note that calling selectChild before the TabContainer startup results in an error.

Answer 2

HTML - Use selected attribute.

<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 - Use selectChild method on TabContainer widget.

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

You can find more examples here: TabContainer Demo

WARNING!!! This demo is from nightly build. Not all features are included in 1.3.2 version.