[maverickminds]

Hello guys,

I am relatively new to the web programming and just trying to learn it. I am building my web page and i want a tabbed web page. I found a script on the net and the adress of the script is as follows. Please have a go thro the following script.

http://www.php-development.ru/javascripts/tab-view.php

This divides your web page into tabs but i dont know how the content becomes the part of differnt tabs, i mean to say that when the content is written linearly in html , how come it goes in different tabs. I am not able to understand the logic. Please help me out.

[TwoD]

The script uses the DIV tags to separate the content into multiple tabs.
What's inside a certain tag will go into Tab1, what's inside the next tag will go into Tab2 etc.

The div named "TabView" contains all the divs creating the whole tab system.
The script finds this tag (you supply its id in the call to tabview_initialize('TabView')).
Then it finds the child DIV of TabView which has the classname "Pads" applied to it. This DIV should contain a number of A tags corresponding to each tab. Those links will get a small JavaScript in their href attributes, linking them to the tabs. (That's done automatically)

Then the child DIV of TabView with the class "Pages" will be found by the script.
Inside that DIV, all DIVs with the classname "Page" will be treated as the content of the tabs. DIV 1 will be the first tab, the next DIV with classname Page will be the next tab and so on.

There should be as many DIV tags with the classname Page as there are A tags in the DIV with classname Tabs.

Any DIV tags with classname Page outside the DIV with classname Pages will be not be styled as tabs by the script!

What happens when you click one of the links in the tabs is that the small script in the href attribute of that tag is executed. The called function hides all the tabs (or DIVs with the classname Page) except the one you want to show.

The classnames are of course also used by the .css file to determine how to style each DIV, depending on what it's for.
I also noticed that there is a DIV with the classname Pad inside each DIV with classname Page. All that DIV does is to add padding to the content inside the tabs, and is not used by the script.

Here's a simple view of the page hierachy

Code:

DIV classname=TabView
|
+--DIV classname=Tabs - Tabs container
|   |
|   +--A - Link for first tab
|   +--A - Link for second tab
|   +--A - Link for third tab
|
+--DIV classname=Pages - Page container
    |
    +--DIV classname=Page - Content of page 1
    +--DIV classname=Page - Content of page 2
    +--DIV classname=Page - Content of page 3