How to specify the selected tab with dijit.layout.TabContainer?

Question

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

Answer 1

HTML Use the 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 the selectChild method for the 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

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

Answer 2

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

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

After starting the TabContainer, you can use selectChild with an id or a link to the widget. Note that calling selectChild before launching TabContainer results in an error.