With Javascript:

<div id="a_tabbar" style="width:400;height:100"></div>
<div id="html_1" >Some content</div>
<script>
            tabbar=new dhtmlXTabBar("a_tabbar","top");
            tabbar.setImagePath("../codebase/imgs/");
            tabbar.addTab("a1","Tab 1-1","100px");
            tabbar.addTab("a2","Tab 1-2","100px");
            tabbar.setContent("a1","html_1");
            tabbar.setContentHTML("a2","<br/>The content can be set as...
</script>

With XML

<?xml version="1.0"?>
<tabbar>
    <row>
        <tab id="a1" width='200px'>Tab 1-1
            <content>
                <![CDATA[{{dhtmlxTabbar:imgs/page_a.gif'}}]]>
            </content>
        </tab>
        <tab id="a2" width='200px'>Tab 1-2
            <content>
                <![CDATA[
          <table>
            <tr><td>Some data</td></tr>
          </table>
        ]]>
            </content>
        </tab>
    </row>
</tabbar>

If tabbar hrefmode set to “iframe” or “iframes-on-demand”, tabbar will load content in iframes (which will be created automatically)

<?xml version="1.0"?>
<tabbar  hrefmode="iframe">
    <row>
        <tab id="b1" width='100px' href="http://groups.google.com">Google groups</tab>
        <tab id="b2" width='100px' selected="1" href="http://google.com">Google search</tab>
    </row>
</tabbar>

Possible hrefmode values are:

• iframe - single iframe created and in content changed on active tab changing;
• iframes - iframes for each tab created and its content loaded at once;
• iframes-on-demand - iframes created only when tab activated.

If tabbar hrefmode set to “ajax” or “ajax-html”, tabbar will load content directly into the page (can contain javascript):

<?xml version="1.0"?>
<tabbar  hrefmode="ajax">
    <row>
        <tab id="b1" width='100px' selected="1"  href="slow_ajax.php?num=1">SCBR 1</tab>
        <tab id="b2" width='100px' href="slow_ajax.php?num=2">SCBR 2</tab>
        <tab id="b3" width='100px' href="slow_ajax.php?num=3">SCBR 3</tab>
    </row>
</tabbar>

Possible hrefmode values are:

• ajax - contnet loaded from xml (see structure below);
• ajax-html - contnet loaded from html file ( any response will be threated as HTML and inserted inside tabbar ).

In this case Tabbar expects AJAX request to get XML of the following structure:

<?xml version="1.0"?>
<content>
  <![CDATA[
    Here should be the content that you want to place. It can be html code or simple text.
  ]]>
</content>

It is possible to mix any href based loading mode and static HTML tabs. Please check the sample of source code below. It creates an AJAX based tabbar, which has static first page.

  <script>
    tabbar=new dhtmlXTabBar("a_tabbar","top");
    tabbar.setImagePath("../codebase/imgs/");
    tabbar.setHrefMode("ajax-html");
    tabbar.setSkinColors("#FCFBFC","#F4F3EE");
    tabbar.addTab("a1","Static","100px");
    tabbar.addTab("a2","AJAX","100px");
    tabbar.setContentHTML("a1","Some static text here");
    tabbar.setContentHref("a2","http://some.url/here");
    tabbar.setTabActive("a1");
  </script>