One tab: Easy Tabs 1.2 : Tab « GUI Components « JavaScript DHTML

One tab: Easy Tabs 1.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy Tabs 1.2 - presented by</title>

<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px;width:200px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#000000; text-decoration:none; padding:4px 5px 6px 5px;  border-left:1px solid #ececec; border-right:1px solid #ececec;}
.menu li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid #d7d7d7; background-color:#CCCCCC; font-weight:bold;  position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4 {border:1px solid #ececec; width:198px; text-align:center;padding:6px 0px; font-size:12px; margin-bottom:5px;}

<script type="text/javascript">
EASY TABS 1.2 Produced and Copyright by Koller Juergen |
Need Help? http:/
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.

//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent") 
//Set the number of your tabs
var tabcount = new Array("4")
//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
var loadtabs = new Array("2")  
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 1;
//the speed in seconds when the tabs should change
var changespeed = 3;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;

/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0))  {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}

var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]);  a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}

<h2>Easy Tabs 1.2 - Example with 1 changing Menu</h2>

<!--Start of the Tabmenu1 -->
<div class="menu">
<li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">Tab 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">Tab 3 </a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;"  title="" id="tablink4">Tab 4 </a>
<!--End of the Tabmenu1 -->

<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->

<a href="#" onmousedown="javascript:stop_autochange(); return false;">Stop the Change</a> | <a href="#" onmousedown="javascript:restart_autochange(); return false;">Restart (if stopped)</a>
<div style="background-color:#efefef; margin-top:25px; padding:8px;">
<strong>Settings setted for this menu:</strong><br/>
<strong>loadtabs = 2</strong> (load tab 2 on start)<br/>
<strong>autochangemenu = 1 </strong>(set the first menu to autochange modus (in this example there is only one menu so i have to set it to 1 or to 0 if i dont want a autochangemenu)<br/>
<strong>changespeed = 3 </strong>(change every 3 seconds)<br/>
<strong>stoponhover = 0 </strong>(don't stop the autochange on hover)</div>

Related examples in the same category

1.Tab Manager 1
2.Tab Manager 2
3.Tab control for a game
4.Tabs in JavaScript
5.Tab with control inside
6.Slide tab
7.Tab control
8.Four Tab with different style
9.XP Tab in JavaScript
10.Two tab in one page
11.HTML style tab
12.Calendar in tab
13.Tab in javascript
14.Tab from gwidgets_0.8.0
15.Two tab: Easy Tabs 1.2
16.three tabs: Easy Tabs 1.2
17.Tabber Example
18.Nested tab and tab changed event
19.Set a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected