<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Easy Tabs 1.1 - presented by Kollermedia.at</title>
<style type="text/css">
/*Example for a Menu Style*/
.menu {background-color:#ececec; color:#272727; border-bottom:1px solid #d7d7d7; height:23px; font:11px Arial, Helvetica, sans-serif;width:400px}
.menu ul {margin:0px; padding:0 0 0 6px; list-style:none;}
.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:white; font-weight:bold; position:relative;}
</style>
<script type="text/javascript">
/*
EASY TABS 1.1 Produced and Copyright by Koller Juergen
www.php100.com | bbs.php100.com
You can use this Script for private and commercial Projects,
but just leave the two credit lines, thank you.
*/
//EASY TABS 1.1 - MENU SETTINGS
//Set the id names of your tablinks (without a number at the end)
var tablink_idname = new Array("tablink","anotherlink", "linkthree")
//Set the id names of your tabcontentareas (without a number at the end)
var tabcontent_idname = new Array("tabcontent","anothercontent", "contentthree")
//Set the number of your tabs in each menu
var tabcount = new Array("4","6","3")
//Set the Tabs wich should load at start (In this Example:Menu 1 -> Tab 2 visible on load, Menu 2 -> Tab 5 visible on load , Menu 3 -> Tab 1 visible on load)
var loadtabs = new Array("2","5","1")
/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {
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';
}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
}
</script>
</head>
<body>
<h2>Easy Tabs 1.1 - Example with 3 Menus</h2>
<!--Start of the Tabmenu1 -->
<div class="menu">
<ul>
<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>
</li>
</ul>
</div>
<!--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-->
<br/><br/>
<!--Start of the Tabmenu2 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('2', '1');" onfocus="easytabs('2', '1');" onclick="return false;" title="" id="anotherlink1">
Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('2', '2');" onfocus="easytabs('2', '2');" onclick="return false;" title="" id="anotherlink2">
Tab 2</a></li>
<li><a href="#" onmouseover="easytabs('2', '3');" onfocus="easytabs('2', '3');" onclick="return false;" title="" id="anotherlink3">
Tab 3</a></li>
<li><a href="#" onmouseover="easytabs('2', '4');" onfocus="easytabs('2', '4');" onclick="return false;" title="" id="anotherlink4">
Tab 4</a></li>
<li><a href="#" onmouseover="easytabs('2', '5');" onfocus="easytabs('2', '5');" onclick="return false;" title="" id="anotherlink5">
Tab 5</a></li>
<li><a href="#" onmouseover="easytabs('2', '6');" onfocus="easytabs('2', '6');" onclick="return false;" title="" id="anotherlink6">
Tab 6</a></li>
</ul>
</div>
<!--End of the Tabmenu2 -->
<!--Start Tabcontent 1 -->
<div id="anothercontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="anothercontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="anothercontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->
<!--Start Tabcontent 4-->
<div id="anothercontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->
<!--Start Tabcontent 5-->
<div id="anothercontent5">Tabcontent 5</div>
<!--End Tabcontent 5-->
<!--Start Tabcontent 6-->
<div id="anothercontent6">Tabcontent 6</div>
<!--End Tabcontent 6-->
<br/><br/>
<!--Start of the Tabmenu3 -->
<div class="menu">
<ul>
<li><a href="#" onmouseover="easytabs('3', '1');" onfocus="easytabs('3', '1');" onclick="return false;" title="" id="linkthree1">
Tab 1</a></li>
<li><a href="#" onmouseover="easytabs('3', '2');" onfocus="easytabs('3', '2');" onclick="return false;" title="" id="linkthree2">
Tab 2</a></li>
<li><a href="#" onmouseover="easytabs('3', '3');" onfocus="easytabs('3', '3');" onclick="return false;" title="" id="linkthree3">
Tab 3</a></li>
</ul>
</div>
<!--End of the Tabmenu3 -->
<!--Start Tabcontent 1 -->
<div id="contentthree1">Tabcontent 1</div>
<!--End Tabcontent 1-->
<!--Start Tabcontent 2-->
<div id="contentthree2">Tabcontent 2</div>
<!--End Tabcontent 2 -->
<!--Start Tabcontent 3-->
<div id="contentthree3">Tabcontent 3</div>
<!--End Tabcontent 3-->
</body>
</html>
PS:http://www.kollermedia.at/archive/2007/02/20/download-tabmenu-for-free/
方便编辑软件显示,可为 id为 tabcontent1,tabcontent2,tabcontent3..设置统一class 属性为display:none;不影响页面显示