提示：您可以先修改部分代碼再運行
<!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>相容各種瀏覽器的的選項卡菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><style type="text/css">#tab_container1 { width:600px; text-align:left;}.cls_tab_nav { height:26px; overflow:hidden; font-size:12px; text-align:left; border-bottom:1px solid #FFAE1E;}.cls_tab_nav ul { font-size:9pt; margin:0; padding:0;}.cls_tab_nav_li { border:1px solid #FFAE1E; background:#fff000; width:157px; height:26px; line-height:26px; float:left; display:inline; overflow:hidden; text-align:center; cursor:pointer; margin-right:10px;}.cls_tab_nav_li_first { background-position:0px 0px;}.cls_tab_nav_li a { text-decoration:none; color:#555; font-size:12px;}.cls_tab_body { border:1px solid #FFAE1E; border-top:none; min-height:260px; padding:20px;}.cls_div { display:none; font-size:14px;}</style></head><body><!--把下面代碼加到<body>與</body>之間--><div id="tab_container1"> <div class="cls_tab_nav"> <ul> <li class="cls_tab_nav_li cls_tab_nav_li_first">最新更新</li> <li class="cls_tab_nav_li">ASP類最新更新</li> <li class="cls_tab_nav_li">C#類最新更新</li> </ul> </div> <div class="cls_tab_body"> <div class="cls_div" >這裡是最新更新的顯示內容</div> <div class="cls_div">ASP的顯示內容</div> <div class="cls_div">C#的顯示內容</div> </div></div><script type="text/javascript">try{document.execCommand("BackgroundImageCache", false, true);}catch(e){}function $(element){if(arguments.length>1){ for(var i=0,elements=[],length=arguments.length;i<length;i++) elements.push($(arguments[i])); return elements;}if(typeof element=="string") return document.getElementById(element);else return element;}var Class={create:function(){ return function(){ this.initialize.apply(this,arguments); }}}Object.extend=function(destination,source){for(var property in source){ destination[property]=source[property];}return destination;}var tabMenu=Class.create();tabMenu.prototype={initialize:function(container,selfOpt,otherOpt){ this.container=$(container); var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{}); var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{}); //用for迴圈得到objs數組,主要是為了相容非IE瀏覽器把空白也當作子物件 for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){ if(this.container.childNodes[i].nodeType==1) objs.push(this.container.childNodes[i]); } var tabArray=objs[0].getElementsByTagName("li"); //用for迴圈得到divArray數組,主要是為了相容非IE瀏覽器把空白也當作子物件 var divArray=new Array(); for(i=0,length=objs[1].childNodes.length;i<length;i++){ if(objs[1].childNodes[i].nodeType==1) divArray.push(objs[1].childNodes[i]); } for(i=0,length=tabArray.length;i<length;i++){ tabArray[i].length=length; tabArray[i].index=i; tabArray[i].onmouseover=function(){ //其它選項卡樣式設定 for(var j=0;j<this.length;j++){ tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0"; for(var property in selfOptions){ tabArray[j].firstChild.style[property]=otherOptions[property]; } } //當前選項卡樣式 this.style.backgroundPosition="0 0"; for(var property in selfOptions){ this.firstChild.style[property]=selfOptions[property]; /* 注意this.style.property和selfOptions.property的用法錯誤 style.fontWeight正確 style["fontWeight"]正確 style["font-weight"]錯誤 */ } //隱藏其它選項卡 for(j=0;j<this.length;j++){ divArray[j].style.display="none"; } //顯示當前選項卡 divArray[this.index].style["display"]="block"; } }}}var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"});</script></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
