[bobster65]

Originally Posted by Mazinger

I noticed it fetches content from external pages. I want it to fetch content from the same page.. something like this: http://www.dynamicdrive.com/dynamicindex17/tabcontent/

This CAN do the same thing. YUI is FAR superior to the Dynamic Drive scripts (which I have also released.. https://vborg.vbsupport.ru/showthread.php?t=161197 )

As I mentioned in the First post, there is A TON that YUI Tab view CAN do.. if you just want non ajax tabbed content, You can read up on YUI Tab View here.. http://developer.yahoo.com/yui/tabview/

Try this and see if its more in tune of what you want to do..

Use the same two CSS Files, but there is no need for the Dispatcher.js, so you can use a different connection method.. (Replace the rest of the HEADINCLUDE from step 3 with the below:

<!-- JavaScript Dependencies for Tabview: --> 
<script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="yui/element/element-beta-min.js"></script> 
<!-- OPTIONAL: Connection (required for dynamic loading of data) --> 
<script type="text/javascript" src="yui/connection/connection-min.js"></script> 
<!-- Source file for TabView --> 
<script type="text/javascript" src="yui/tabview/tabview-min.js"></script>

Then you can use one of the following two content methods.....


TabViews can be created from existing HTML markup or entirely through JavaScript. Each Tab in the TabView is a list item (<li>). The root element of the TabView is a <div> element.

The TabView control is defined by YAHOO.widget.TabView. To create a TabView from existing markup you can simply pass the id (or object reference) for the HTMLElement that will become the TabView. If you follow the default markup pattern outlined below, the tabs will be constructed automatically. The list item with class="selected" becomes the active tab.

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script> 

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
        <li><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    </ul>            
    <div class="yui-content">
        <div><p>Tab One Content</p></div>
        <div><p>Tab Two Content</p></div>
        <div><p>Tab Three Content</p></div>
    </div>
</div>

In the this example, the TabView is generated entirely through JavaScript. Here the TabView's DOM structure will be assembled in a new element and appended to the existing document.body.

<script type="text/javascript">
    var myTabs = new YAHOO.widget.TabView("demo");
	
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab One Label',
        content: '<p>Tab One Content</p>',
        active: true
    }));
    
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Two Label',
        content: '<p>Tab Two Content</p>'
    }));
    
    myTabs.addTab( new YAHOO.widget.Tab({
        label: 'Tab Three Label',
        content: '<p>Tab Three Content</p>'
    }));
    
    myTabs.appendTo(document.body);
</script>