CSS/JavaScript Tabs

Last Edited: 2009-07-11

A simple tabs script using CSS and JavaScript. If you need to display large amounts of information on a web page then this script could come in handy as you could separate the information into different sections and put each section under a different tab.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CSS/JavaScript Tabs Script</title> <meta name="title" content="CSS/JavaScript Tabs Script" /> <meta name="author" content="Programmer Central" /> <meta http-equiv="Content-Type" content="text/html; charset='UTF-8'" /> <script type="text/javascript"> var LINK = "_link"; var CLASS_NAME = "current"; var displayed_tab = null; (function() { if (window.addEventListener) { window.addEventListener("load", setup_tabs, false); } else { window.attachEvent("onload", setup_tabs); } })(); function setup_tabs() { var tab_links = document.getElementById("tabs").getElementsByTagName("a"); for (var i = 0; i < tab_links.length; i++) { setup_tab_link(tab_links[i]); } } function setup_tab_link(link) { var num = link.id.indexOf("_"); var link_id = link.id.substring(0, num); link.onclick = function(){display_tab(link_id);}; } function hide_all_tabs() { var tab_divs = document.getElementsByTagName("div"); //Only need those div elements that have an id value starting with 'tab' for (var i = 0; i < tab_divs.length; i++) { if (tab_divs[i].id.indexOf("tab") === 0) { change_tab_display(tab_divs[i], "none", tab_divs[i].id, ""); } } } function display_tab(id) { if (!displayed_tab) { hide_all_tabs(); } else { change_tab_display(displayed_tab, "none", displayed_tab.id, ""); } //Make the selected tab visible displayed_tab = document.getElementById(id); change_tab_display(displayed_tab, "block", id, CLASS_NAME); } function change_tab_display(tab_content_element, display, tab_link_id, class_name) { //Make the selected tab visible or not visible tab_content_element.style.display = display; //Change the class name of the tab link document.getElementById(tab_link_id + LINK).className = class_name; } </script> <style type="text/css"> .tab { display: none; border: 1px solid black; clear: both; margin-bottom: 10px; padding: 5px; overflow: scroll; overflow-x: hidden; height: 300px; } .tab_current { display: block; border: 1px solid black; clear: both; margin-bottom: 10px; padding: 5px; overflow: scroll; overflow-x: hidden; height: 300px; } .tab *, .tab_current * { margin: 0%; } .tabs { padding: 0%; margin: 0%; list-style-type: none; } .tabs li { margin: 0px 5px 0px 0px; float: left; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; background-color: #EAEAEA; } .tabs li a.current { background-color: white; } .tabs li a.current { background-color: white; top: 1px; position: relative; } .tabs li a { padding: 8px 20px; color: black; text-decoration: none; display: block; } .tabs li a:hover { text-decoration: underline; } .tabs_top { margin-bottom: 0px; padding-bottom: 15px; } </style> </head> <body> <h1 class="tabs_top">CSS/JavaScript Tabs</h1> <ul class="tabs" id="tabs">  <li><a href="#" class="current" id="tab1_link">Tab 1</a></li> <li><a href="#" id="tab2_link">Tab 2</a></li> <li><a href="#" id="tab3_link">Tab 3</a></li> </ul>  <div class="tab_current" id="tab1"> <p>Tab 1 Content.</p> </div> <div class="tab" id="tab2"> <p>Tab 2 Content.</p> </div> <div class="tab" id="tab3"> <p>Tab 3 Content.</p> </div> </body> </html>

The preview will open up in a new window.

Information

If you use this script on any of your web pages then please provide a link back to us.

More free JavaScript Navigation scripts.

Rate This Script

Rate this script!

Rate This Script
	Excellent!
	Very Good
	Good
	Fair
	Poor

Be Sure To Check Out These Scripts
CSS/JavaScript Drop Down Menu	A horizontal drop down menu script which uses Javascript and CSS. When the mouse pointer is moved over a link a further set of links is revealed.
PHP Directory List	Displays a list of all files and directories in a directory.

Top of Page

Programmer Central

Free Web Related Scripts, Tutorials, and Generators.

Search

Links

Font Size

Random Script

Support Us

CSS/JavaScript Tabs

Code

Information

Rate This Script