This example shows how to create a TabView widget from existing HTML on the page.
Creating A TabView From Existing Markup
A TabView can be created easily from existing markup, supporting a progressive enhancement approach to development.
The Markup
The only markup requirements are an unordered list of items and a corresponding group of divs.
<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>
The JavaScript
TabView extends Widget, and the srcNode
becomes the contentBox.  This is the
minimal requirement to create a Tabview instance for the markup,
and can be assigned using a selector.  Calling render enlivens the TabView
 making it usable.
var tabview = new Y.TabView({srcNode:'#demo'});
tabview.render();
Complete Example Source
<div id="demo">
    <ul>
        <li><a href="#foo">foo</a></li>
        <li><a href="#bar">bar</a></li>
        <li><a href="#baz">baz</a></li>
    </ul>
    <div>
        <div id="foo">
            <p>foo content</p>
        </div>
        <div id="bar">
            <p>bar content</p>
        </div>
        <div id="baz">
            <p>baz content</p>
        </div>
    </div>
</div>
<script type="text/javascript">
YUI().use('tabview', function(Y) {
    var tabview = new Y.TabView({srcNode:'#demo'});
    tabview.render();
});
</script>