TabEsay!简单的，好用的，扩展性很好，的，选项卡

最新推荐文章于 2024-11-11 23:26:32 发布

carlfan

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量577

点赞数

分类专栏： HTML/CSS JavaScript 文章标签：扩展 function timer menu xhtml class

本文链接：https://blog.csdn.net/carlfan/article/details/4826977

版权

HTML/CSS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

<!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=GBK" /> <title>Easy Tabs 1.2</title> <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> <script type="text/javascript"> var tablink_idname = new Array("tablink","anotherlink") var tabcontent_idname = new Array("tabcontent","anothercontent") var tabcount = new Array("6","6") var loadtabs = new Array("2","5") var autochangemenu = 2; var changespeed = 3; var stoponhover = 0; 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.οnlοad=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> </head> <body> <h2>鼠标经过切换</h2>  <div class="menu"> <ul> <li><a href="#" οnmοuseοver="easytabs('1', '1');" οnfοcus="easytabs('1', '1');" οnclick="return false;" title="" id="tablink1">Tab 1</a></li> <li><a href="#" οnmοuseοver="easytabs('1', '2');" οnfοcus="easytabs('1', '2');" οnclick="return false;" title="" id="tablink2">Tab 2 </a></li> <li><a href="#" οnmοuseοver="easytabs('1', '3');" οnfοcus="easytabs('1', '3');" οnclick="return false;" title="" id="tablink3">Tab 3 </a></li> <li><a href="#" οnmοuseοver="easytabs('1', '4');" οnfοcus="easytabs('1', '4');" οnclick="return false;" title="" id="tablink4">Tab 4 </a></li> <li><a href="#" οnmοuseοver="easytabs('1', '5');" οnfοcus="easytabs('1', '5');" οnclick="return false;" title="" id="tablink5">Tab 5 </a></li> <li><a href="#" οnmοuseοver="easytabs('1', '6');" οnfοcus="easytabs('1', '6');" οnclick="return false;" title="" id="tablink6">Tab 6 </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>   <div id="tabcontent5">Tabcontent 5</div>   <div id="tabcontent6">Tabcontent 6</div>  <br/><br/> <h2>自动切换！</h2>  <div class="menu"> <ul> <li><a href="#" οnmοuseοver="easytabs('2', '1');" οnfοcus="easytabs('2', '1');" οnclick="return false;" title="" id="anotherlink1">Tab 1</a></li> <li><a href="#" οnmοuseοver="easytabs('2', '2');" οnfοcus="easytabs('2', '2');" οnclick="return false;" title="" id="anotherlink2">Tab 2</a></li> <li><a href="#" οnmοuseοver="easytabs('2', '3');" οnfοcus="easytabs('2', '3');" οnclick="return false;" title="" id="anotherlink3">Tab 3</a></li> <li><a href="#" οnmοuseοver="easytabs('2', '4');" οnfοcus="easytabs('2', '4');" οnclick="return false;" title="" id="anotherlink4">Tab 4</a></li> <li><a href="#" οnmοuseοver="easytabs('2', '5');" οnfοcus="easytabs('2', '5');" οnclick="return false;" title="" id="anotherlink5">Tab 5</a></li> <li><a href="#" οnmοuseοver="easytabs('2', '6');" οnfοcus="easytabs('2', '6');" οnclick="return false;" title="" id="anotherlink6">Tab 6</a></li> </ul> </div>   <div id="anothercontent1">Tabcontent 1</div>   <div id="anothercontent2">Tabcontent 2</div>   <div id="anothercontent3">Tabcontent 3</div>   <div id="anothercontent4">Tabcontent 4</div>   <div id="anothercontent5">Tabcontent 5</div>   <div id="anothercontent6">Tabcontent 6</div>  </body> </html>