Home Submit a Script Tutorials Ajax Tutorials | Ajax Buttons Cookies CSS | Forms Games Generators Image Effects | Math Related Misc/Libraries/Tools Navigation Page-Details | Pass. Prot. Snippets Text Effects Time & Date | User-Details JS Core Reference Developers Library HTMLGoodies
Script Count: 1,420

###### Navigation Menu Alphabetical Listing Site Contents Site FAQ About JSS JavaScript Forum JavaScript Tutorial Friends of JSS Link to Us JavaScript Help Contribute a script Technology Jobs Become a Partner ###### Internet.commerce Be a Commerce Partner ###### Internet.com IT Developer Internet News Small Business Personal Technology Search internet.com Advertise Corporate Info Newsletters Tech Jobs E-mail Offers ###### Developer Channel FlashKit.com JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com ###### Great Sites DocJavaScript.com dhtml.com The Freebie Directory TheFreeSite.com Browse Doc JS's Tips!
###### Promotions Free Announcements

home » css » tab view

- General
- Notes
- Source Code
- User Comments

## General

A combination of CSS and JavaScript that allows switching between several pages without loading them from server. The script emulates the behavior of tabbed controls in Windows applications.

Basic Info. Categories Order Form
You can put regular text on the tabs.

We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.

We also have a great JavaScript Forum where you can post script requests, script questions, and more.

Categories include:

• Cookies • CSS • Forms | • Games • Generators • Image Effects | • Math Related • Miscellaneous • Navigation
• Page Details • Security • Snippets | • Time & Date • Tools • Tutorials | • Text Effects • User Details

You can also use forms on the tab pages. (This one is just an example; it doesn't work.)

Username: |
Password: |

## Notes

- Created by: Ilya S. Lyubinskiy
- Web Site: http://www.php-development.ru/
- Posted: January 25, 2006

## Source Code

Paste this source code into the designated areas.

- External File
- CSS
- Head
- Body
- Other

## External file

Paste this code into an external JavaScript file named: tabView.js

/* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved. Technical support: http://www.php-development.ru/ YOU MAY NOT (1) Remove or modify this copyright notice. (2) Distribute this code, any part or any modified version of it. Instead, you can link to the homepage of this code: http://www.php-development.ru/javascripts/tabview.php. YOU MAY (1) Use this code on your website. (2) Use this code as a part of another product. NO WARRANTY This code is provided "as is" without warranty of any kind, either expressed or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose. You expressly acknowledge and agree that use of this code is at your own risk. If you find my script useful, you can support my site in the following ways: 1. Vote for the script at HotScripts.com (you can do it on my site) 2. Link to the homepage of this script or to the homepage of my site: http://www.php-development.ru/javascripts/tabview.php http://www.php-development.ru/ You will get 50% commission on all orders made by your referrals. More information can be found here: http://www.php-development.ru/affiliates.php */ // ----- Auxiliary ------------------------------------------------------------- function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

## CSS

Paste this code into your external CSS file or in the `<style>` section within the `HEAD` section of your HTML document.

div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; text-align: center; height: 24px; line-height: 28px; vertical-align: middle; background: url('/img/tab-view/tabs.png') no-repeat -2px -1px; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 900; font-size: 13px; color: #000080; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background: url('tabs.png') no-repeat -2px -31px; } div.TabView div.Pages { clear: both; border: 1px solid #404040; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 18px; }

## Head

Paste this code into the `HEAD` section of your HTML document.

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

## Body

Paste this code into the `BODY` section of your HTML document

<div class="TabView" id="TabView"> <!-- *** Tabs ************************************************************** --> <div class="Tabs" style="width: 350px;"> <a>Basic Info.</a> <a>Categories</a> <a>Order Form</a> </div> <!-- *** Pages ************************************************************* --> <div class="Pages" style="width: 450px; height: 250px; text-align: left;"> <div class="Page"> <div class="Pad"> <!-- *** Page1 Start *** --> <br> You can put regular text on the tabs. <p> We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.</p> <p> We also have a great JavaScript Forum where you can post script requests, script questions, and more.</p> <!-- *** Page1 End ***** --> </div> </div> <!-- *** Page2 Start *** --> <div class="Page"> <div class="Pad"> <br> Categories include:<br> <table cellpadding="15" valign="top"> <tr> <td> • Cookies<br> • CSS<br> • Forms<br> </td><td> • Games<br> • Generators<br> • Image Effects </td><td> • Math Related<br> • Miscellaneous<br> • Navigation </td></tr><tr><td> • Page Details<br> • Security<br> • Snippets </td><td> • Time & Date<br> • Tools<br> • Tutorials </td><td> • Text Effects<br> • User Details </td> </tr> </table> <!-- *** Page2 End ***** --> </div> </div> <div class="Page"> <div class="Pad"> <!-- *** Page3 Start *** --> <br> <p> You can also use forms on the tab pages. <small><em>(This one is just an example; it doesn't work.)</em></small></p> <table> <tr> <td>Username: </td> <td><input style="width: 120px;" type="text" name="username" /></td> </tr> <tr> <td>Password: </td> <td><input style="width: 120px;" type="password" name="password" /></td> </tr> <tr> <td> </td> <td><input type="submit" value="Submit" /></td> </tr> </table> <!-- *** Page3 End ***** --> </div> </div>

## Other

Download the images using the URL below:

- Download the images here

Add this to the end of your page:

<script type="text/javascript"> tabview_initialize('TabView'); </script>

## User Comments

Add a comment, suggestion, or correction [For questions about usage, consult the Notes tab above or visit the JavaScript forum. Do not include more than two (2) lines of code in your comments. If you have suggestions or corrections, you can submit them to us.]
Name:
E-mail:
URL:
[optional]
Subject:
[optional]
Comments:

CAPTCHA Verification Please enter the code displayed to the right in the box below: | Hear it!

Comments feed

#### 8. From: tarkahn
07/14/2008 20:48:39

This is a GREAT script !!!
Thanks for making it, and making it available =)
it's maybe even a little too easy to use..
hmmm.....
THANKS AGAIN

#### 7. From: Jonathan
return form results to tabs other than #1
07/20/2007 10:16:53

I'm trying to submit form data to the same tab as it was spawned, but the script always returns to tab 1.
how can i make the page start on tabs other than #1, like a named anchor?

#### 9. From: bob kershwey
tab viewer
04/06/2008 14:16:56

i need help , i love this script it works perfectly, but on two of the tabs the content moves when you use the mouse wheel scroller any answers? thanks
bob

#### 10. From: Lee (Admin)
10/31/2008 14:10:20

Your question is beyond the scope of these comments. You will need to post it over on the JavaScript forum. Thanks!

#### 6. From: Susan
03/07/2007 19:31:55

I'm trying to add more tabs but it isn't working. I must be missing something. Is there some trick?

#### 5. From: diego arcila
01/28/2007 19:03:43

thanks, this tip in css is very easy

#### 4. From: Shreya Dahal
01/26/2007 12:14:25

Very good. You've done very good. But you should also keep example showing how to use the script.

#### 3. From: Claes
01/06/2007 13:56:56

Hi Eric!

To make the images work, just add this line to the HEAD of your HTML document. (Depending on where you have your CSS file.)

<link rel="stylesheet" type="text/css" href="tabbs.css">

#### 2. From: Senthil Kumar S
12/08/2006 00:32:45

Dear Ilya S. Lyubinskiy ,

The Script by you is very useful for me to develop a project. I am a PHP developer from India. I want to load different pages when click a tab at the same time i also want to change the styles also. I set tabs in the header of my document. i include the header in all of my pages. Help me in this problem.

Regards...

Senthil Kumar...

#### 1. From: Eric
12/07/2006 02:59:22

I like the script and everything works except the tab feature. If anyone can explain how to add the tab images to work with the script, I would appreciate it.

We'll send this script to you!

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Sign up for the JavaScript Weekly
internet.com Privacy Policy
Contact Us! | JavaScript Forum