Tip: you can modify some code before running
<!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><title>Javascript latency effect tab menu code</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">. CMS {font-size: 12px; width: 200px; line-height: 30px ;}. CMS ul, li {list-style: none; margin: 0px; padding: 0px ;}. CMS. tabTop {clear: both; height: 30px ;}. CMS. tabTop ul {color: # FFF; height: 30px ;}. CMS. tabTop li {display: inline; width: 50px; height: 30px; float: left; text-align: center; cursor: pointer ;}. CMS. con_id {clear: both; background: # FF9900; height: 70px; text-align: center ;}. CMS. ul_id1 {background: #000000 ;}. CMS. ul_id1. li_id0 {color: # FFFF00 ;}. CMS. ul_id2 {background: # FF6600 ;}. CMS. ul_id2. li_id1 {color: # FFFF00 ;}. CMS. ul_id3 {background: # 3366FF ;}. CMS. ul_id3. li_id2 {color: # FFFF00 ;}. CMSbox {}</style><script language="javascript">// Obtain the operable IDfunction GetObj (objID) {if (document. getElementById) {return eval ('document. getElementById ("'+ objID +'") ');} else {if (document. layers) {return eval ("document. layers ['"+ objID +"'] ");} else {return eval ('document. all. '+ objID) ;}}var Me; function TagTab (arr) {this. curTab = arr [0]; this. arr = arr; for (var I = 0; I<arr.length;i++){var lis = arr[i].getElementsByTagName("li");for(var j=0;j<lis.length;j++){lis[j].tag=j;lis[j].fac=this;lis[j].onmouseover =function(){Me=this;window.setTimeout("Me.fac.show("+this.tag+");",MDelayTime);}}}this.show = function(i){this.curTab.style.display='none';this.arr[i].style.display = 'block';this.curTab = this.arr[i];}}window.onload=function(){var oneTab = new TagTab([GetObj("Con_id0"),GetObj("Con_id1"),GetObj("Con_id2")]);var twoTab = new TagTab([GetObj("Con_id3"),GetObj("Con_id4"),GetObj("Con_id5")]);}//延迟标签var MDelayTime=300;</script></head><body><!--把下面代码加到<body>与</body>之间--><!--第一个切换实体 --><div class="CMS" id="CMS_id0"><!--Con_id0--><div class="Con_id" id="Con_id0"><div class="TabTop"><ul class="ul_id1"><li class="Li_id0" id="Tab_id0" >Shanghai</li><li class="Li_id1" id="Tab_id1" >Beijing</li><li class="Li_id2" id="Tab_id2" >Guangzhou</li></ul></div><div class="CMSbox">Contents of Shanghai</div></div><!--Con_id1--><div class="Con_id" id="Con_id1" ><div class="TabTop"><ul class="ul_id2"><li class="Li_id0" id="Tab_id0" >Shanghai</li><li class="Li_id1" id="Tab_id1" >Beijing</li><li class="Li_id2" id="Tab_id2" >Guangzhou</li></ul></div><div class="CMSbox">Beijing content</div></div><!--Con_id2--><div class="Con_id" id="Con_id2" ><div class="TabTop"><ul class="ul_id3"><li class="Li_id0" id="Tab_id0" >Shanghai</li><li class="Li_id1" id="Tab_id1" >Beijing</li><li class="Li_id2" id="Tab_id2">Guangzhou</li></ul></div><div class="CMSbox">Content of Guangzhou</div></div></div><br><!--第二个切换实体 --><div class="CMS" id="CMS_id1"><!--Con_id0--><div class="Con_id" id="Con_id3"><div class="TabTop"><ul class="ul_id1"><li class="Li_id0" id="Tab_id3">Guangdong</li><li class="Li_id1" id="Tab_id4" >Jiangsu</li><li class="Li_id2" id="Tab_id5">Shandong province</li></ul></div><div class="CMSbox">Content of Guangdong</div></div><!--Con_id1--><div class="Con_id" id="Con_id4" ><div class="TabTop"><ul class="ul_id2"><li class="Li_id0" id="Tab_id3" >Guangdong</li><li class="Li_id1" id="Tab_id4" >Jiangsu</li><li class="Li_id2" id="Tab_id5" >Shandong province</li></ul></div><div class="CMSbox">Contents of Jiangsu province</div></div><!--Con_id2--><div class="Con_id" id="Con_id5" ><div class="TabTop"><ul class="ul_id3"><li class="Li_id0" id="Tab_id3">Guangdong</li><li class="Li_id1" id="Tab_id4" >Jiangsu</li><li class="Li_id2" id="Tab_id5">Shandong province</li></ul></div><div class="CMSbox">Content of Shandong province</div></div></div></body></html>
Tip: you can modify some code before running
