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

2 Answers2

8

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.

Lukasz R.
  • 2,265
  • 1
  • 24
  • 22
  • 1
    This answer is incomplete. You describe how to set selected tabs at startup, but the poster also asked how to switch tabs programmatically. The solution is somewhat odd as **selectChild()** requires a widget, not a number, so you need access to the object of the content pane you want to select. This is easy enough when building the pane, but to do it arbitrarily at runtime, you have to get the child you want first, then tell the tabContainer to select it. I have added this to your answer. – Flowchartsman Apr 18 '12 at 22:05
2

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.