HTML Tabs Using JavaScript

well, i was loooking for an option to create tabs in an html document without using many graphic labels and huge scripting, as i was fed up of spending loads and loads of hours doing the base work for the out put.

i found this interesting javascript on "i don't know where," which uses just a single script file and can be used to create tabs in an html document. the best part is all the coding goes in one html and once viewed on an internet browser, it will show the tabs.


the basic usage of this script is as follows:

1. put this part in the html header:

<script type="text/javascript"
src="tabber.js"></script>

<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash" on the page as plain HTML. After tabber runs, the class is changed to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');

</script>

2. and put this in the body part of the html:

<div class="tabbertab">

<h2>Sample Tab</h2>

<p>

/* Tab content goes in here... */

</p>

</div>

3. repeat step "2" for the number of tabs you want.

4. the title of the tab is defined within the <h1> and </h2> tags.

5. you can change the font and colors by using a style sheet and defining values.

6. the text in each tab goes within the <p> and </p> tags. you can include tables or any form of html tag within these tags.

7. one "tab block" is defined within the <div class="tabbertab"> and </div> tags.

8. you can download the javascript from the following location:

http://mediafire.com/?34mqtmmhcdb

note: when using deamweaver to design/edit the page, the tabs are not shown in a tabular format in design view. but it will show up when previewed in a browser.

disclaimer: this javascript is free to edit and update, but should be distributed with the author's disclaimer. project gcc does not encourage the violation of software integrity by any means.


happy tabbing :)


cheers,
neo.