1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>兼容各种浏览器的的选项卡菜单</title> 5 <meta http-equiv="content-type" content="text/html;charset=gb2312"> 6 <!--把下面代码加到<head>与</head>之间--> 7 <style type="text/css"> 8 #tab_container1 { 9 600px; 10 text-align:left; 11 } 12 .cls_tab_nav { 13 height:26px; 14 overflow:hidden; 15 font-size:12px; 16 text-align:left; 17 border-bottom:1px solid #FFAE1E; 18 } 19 .cls_tab_nav ul { 20 font-size:9pt; 21 margin:0; 22 padding:0; 23 } 24 .cls_tab_nav_li { 25 border:1px solid #FFAE1E; 26 background:#fff000; 27 157px; 28 height:26px; 29 line-height:26px; 30 float:left; 31 display:inline; 32 overflow:hidden; 33 text-align:center; 34 cursor:pointer; 35 margin-right:10px; 36 } 37 .cls_tab_nav_li_first { 38 background-position:0px 0px; 39 } 40 .cls_tab_nav_li a { 41 text-decoration:none; 42 color:#555; 43 font-size:12px; 44 } 45 .cls_tab_body { 46 border:1px solid #FFAE1E; 47 border-top:none; 48 min-height:260px; 49 padding:20px; 50 } 51 .cls_div { 52 display:none; 53 font-size:14px; 54 } 55 </style> 56 </head> 57 <body> 58 <!--把下面代码加到<body>与</body>之间--> 59 <div id="tab_container1"> 60 <div class="cls_tab_nav"> 61 <ul> 62 <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">最新更新</a></li> 63 <li class="cls_tab_nav_li"><a href="#">ASP类最新更新</a></li> 64 <li class="cls_tab_nav_li"><a href="#">C#类最新更新</a></li> 65 </ul> 66 </div> 67 <div class="cls_tab_body"> 68 <div class="cls_div" style="display:block;">这里是最新更新的显示内容</div> 69 <div class="cls_div">ASP的显示内容</div> 70 <div class="cls_div">C#的显示内容</div> 71 </div> 72 </div> 73 <script type="text/javascript"> 74 75 76 try 77 { 78 document.execCommand("BackgroundImageCache", false, true); 79 } 80 catch(e){} 81 82 83 function $(element) 84 { 85 if(arguments.length>1) 86 { 87 for(var i=0,elements=[],length=arguments.length;i<length;i++) 88 elements.push($(arguments[i])); 89 return elements; 90 } 91 if(typeof element=="string") 92 return document.getElementById(element); 93 else 94 return element; 95 } 96 97 var Class= 98 { 99 create:function() 100 { 101 return function() 102 { 103 this.initialize.apply(this,arguments); 104 } 105 } 106 } 107 108 109 Object.extend=function(destination,source) 110 { 111 for(var property in source) 112 { 113 destination[property]=source[property]; 114 } 115 return destination; 116 } 117 118 var tabMenu=Class.create(); 119 120 tabMenu.prototype= 121 { 122 initialize:function(container,selfOpt,otherOpt) 123 { 124 this.container=$(container); 125 var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{}); 126 var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{}); 127 //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象 128 for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++) 129 { 130 if(this.container.childNodes[i].nodeType==1) 131 objs.push(this.container.childNodes[i]); 132 } 133 var tabArray=objs[0].getElementsByTagName("li"); 134 //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象 135 var divArray=new Array(); 136 for(i=0,length=objs[1].childNodes.length;i<length;i++) 137 { 138 if(objs[1].childNodes[i].nodeType==1) 139 divArray.push(objs[1].childNodes[i]); 140 } 141 for(i=0,length=tabArray.length;i<length;i++) 142 { 143 tabArray[i].length=length; 144 tabArray[i].index=i; 145 tabArray[i].onmouseover=function() 146 { 147 //其它选项卡样式设置 148 for(var j=0;j<this.length;j++) 149 { 150 tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0"; 151 for(var property in selfOptions) 152 { 153 tabArray[j].firstChild.style[property]=otherOptions[property]; 154 } 155 } 156 //当前选项卡样式 157 this.style.backgroundPosition="0 0"; 158 for(var property in selfOptions) 159 { 160 this.firstChild.style[property]=selfOptions[property]; 161 /* 162 注意this.style.property和selfOptions.property的用法错误 163 style.fontWeight正确 164 style["fontWeight"]正确 165 style["font-weight"]错误 166 */ 167 } 168 //隐藏其它选项卡 169 for(j=0;j<this.length;j++) 170 { 171 divArray[j].style.display="none"; 172 } 173 //显示当前选项卡 174 divArray[this.index].style["display"]="block"; 175 } 176 } 177 } 178 } 179 var tab1=new tabMenu("tab_container1",{fontSize:"14px",color:"#FFBC44",fontWeight:"bold"},{fontWeight:"normal",color:"#666"}); 180 </script> 181 </body> 182 </html>