nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Tabcontainer change on button click

IbrahimHussein

<div data-dojo-type="dijit.layout.TabContainer">
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'">
           
     </div>   
       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'">
    </div>
  </div>

<div data-dojo-type="dijit.layout.TabContainer">

     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend'">



     </div>

       <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'">

</div>

</div>

Hey guys, im trying to figure out how to switch between the tabs from a button (rather than pressing on the tab itself) is there a way to do this?

edit - answer: give the div of the tabcontainer and the tab itself an id tag

<id="tabconID" div data-dojo-type="dijit.layout.TabContainer">

for tab itself: <div id="tab1Name" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Search results'"></div></div>

then in your javascript section do

//declare tab
var tc = registry.byId("tabconID");

//use to select tab

tc.selectChild(registry.byId("tab1Name"));

Find more posts tagged with

Accepted answers

khutchins

Here's a revised version of your fiddle showing the new tab. One place I often check when trying to figure out how to do something with one of dojo's widgets is the dojo nightly tests. Visit the TabContainer Demo and you'll see that it shows how to do things like add a tab, rename tabs and place the tabs in various locations.

These tests are available for many of dojo's widgets and are often invaluable when trying to learn how to use them.

All comments

IbrahimHussein

Thanks, will check out.

khutchins

These tests are available for many of dojo's widgets and are often invaluable when trying to learn how to use them.

IbrahimHussein

Thanks that got me in the right direction. Only thing that doesn't work for me is when I add a new tab programmatically, the content doesn't appear. I get a blank button (if there is no tabContainer in the function declaration) and a blank select field if there is a tabContainer in the function declaration.

See here: jsfiddle

khutchins

You can use the selectChild method to select the tab. There's an example and some more info in the dojo doc for the dijit/layout/TabContainer — The Dojo Toolkit - Reference Guide .

require(["dijit/registry", "dijit/layout/ContentPane"], function(registry, ContentPane){

var tabs = registry.byId("myTabContainer");

var pane = new ContentPane({ title:"Remote Content", href:"remote.html" });

tabs.addChild(pane);

tabs.selectChild(pane);

});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.