簡易CSS標籤，當滑鼠移過去(MouseUp)時，即可變換內容，類似Yahoo首頁。
STEP 1. 把下列語法加入<head></head>內
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:11px;}
/*Example for a Menu Style*/
.menu {background-color:#008bd3;border-bottom:1px solid #d7d7d7; height:23px;width:300px;}
.menu ul {margin:0px; padding:0px; list-style:none; text-align:center;}
.menu li {display:inline; line-height:23px;}
.menu li a {color:#ffffff; text-decoration:none; padding:5px 5px 6px 5px; }
.menu
li a.tabactive {border-left:1px solid #d7d7d7; border-right:1px solid
#d7d7d7; color:#000000; background-color:#ffffff; font-weight:bold;
position:relative;}
#tabcontent1,#tabcontent2,#tabcontent3,#tabcontent4,#anothercontent1,#anothercontent2,
#anothercontent3, #anothercontent4,#anothercontent5, #anothercontent6
{border:1px solid #ececec; width:298px; text-align:center;padding:6px
0px; font-size:12px; margin-bottom:5px;}
</style>
/*以上是CSS可自行調整*/
<script type="text/javascript">
/*
EASY TABS 1.2 Produced and Copyright by Koller Juergen
www.kollermedia.at | www.austria-media.at
Need Help? http:/www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange
You can use this Script for private and commercial Projects, but just leave the two credit lines, thank you.
*/
//EASY TABS 1.2 - 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")
//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 = 2;
//the speed in seconds when the tabs should change
var changespeed = 2;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 1;
//END MENU SETTINGS
/*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;}
window.onload=function(){
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();}
}
</script>
/*以上是javascript可自行調整*/
STEP 2. 把下列程式加到<body></body>中
<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>
<div id="tabcontent1">Tabcontent 1</div>
<div id="tabcontent2">Tabcontent 2</div>
<div id="tabcontent3">Tabcontent 3</div>
<div id="tabcontent4">Tabcontent 4</div>
現在很流行這種標籤，可在縮減頁面過長的情況，個人覺得還不錯用，只是在Firefox中會出現錯誤: document.getElementById(tablink_idname[menunr] + i) has no properties，目前還無解...
參考出處：
http://www.kollermedia.at/archive/2007/07/10/easy-tabs-12-now-with-autochange/
http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html
留言列表
科技 (16)
