兼容各种浏览器的的选项卡菜单

  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>