标签：
<!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=utf-8" /> <title>Tab选项卡</title> <style type="text/css"> * { padding:0px; margin:0px; } #tab,#tab2{ width:450px; margin:20px auto; font-size:12px; height:245px;} .tab_inner { list-style:none; border:1px solid #000; overflow:hidden; background:#000000; color:#FFFFFF; border-top-left-radius:5px; border-top-right-radius:5px; height:30px} .tab_inner li{ width:80px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer; } .tab_inner .hover{ background:#999; color:#000000;} .content_{ border-bottom:1px #000000 solid; border-right:1px #000000 solid; border-left:1px #000000 solid; border-bottom-right-radius:5px; border-bottom-left-radius:5px; box-shadow:3px 3px 8px #666666; width:448px; } .content_ .summary{ display:none; clear:both } .content_ .summary ul { padding-left: 30px; list-style-type:armenian line-height:25px;} </style> </head> <body> <div id="tab2"> <ul class="tab_inner"> <li class="hover">栏目一</li> <li>栏目二</li> <li>栏目三</li> <li>栏目四</li> </ul> <div class="content_"> <div class="summary" style="display:block;"> <ul> <li>网页特效原理分析</li> <li>响应用户操作</li> <li>提示框效果</li> <li>事件驱动</li> <li>元素属性操作</li> <li>动手编写第一个JS特效</li> <li>引入函数</li> <li>网页换肤效果</li> <li>展开/收缩播放列表效果</li> </ul> </div> <div class="summary"> <ul> <li>改变网页背景颜色</li> <li>函数传参</li> <li>高重用性函数的编写</li> <li>126邮箱全选效果</li> <li>循环及遍历操作</li> <li>调试器的简单使用</li> <li>典型循环的构成</li> <li>for循环配合if判断</li> <li>className的使用</li> <li>innerHTML的使用</li> <li>戛纳印象效果</li> <li>数组</li> <li>字符串连接</li> </ul> </div> <div class="summary"> <ul> <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li> <li>JavaScript出现的位置、优缺点</li> <li>变量、类型、typeof、数据类型转换、变量作用域</li> <li>闭包：什么是闭包、简单应用、闭包缺点</li> <li>运算符：算术、赋值、关系、逻辑、其他运算符</li> <li>程序流程控制：判断、循环、跳出</li> <li>命名规范：命名规范及必要性、匈牙利命名法</li> <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li> <li>定时器的使用：setInterval、setTimeout</li> <li>定时器应用：站长站导航效果</li> <li>定时器应用：自动播放的选项卡</li> <li>定时器应用：数码时钟</li> <li>程序调试方法</li> </ul> </div> <div class="summary"><ul><li>over...</li></ul></div> </div> </div> <div id="tab"> <ul class="tab_inner"> <li class="hover">栏目一</li> <li>栏目二</li> <li>栏目三</li> <li>栏目四</li> </ul> <div class="content_"> <div class="summary" style="display:block;"> <ul> <li>网页特效原理分析</li> <li>响应用户操作</li> <li>提示框效果</li> <li>事件驱动</li> <li>元素属性操作</li> <li>动手编写第一个JS特效</li> <li>引入函数</li> <li>网页换肤效果</li> <li>展开/收缩播放列表效果</li> </ul> </div> <div class="summary"> <ul> <li>改变网页背景颜色</li> <li>函数传参</li> <li>高重用性函数的编写</li> <li>126邮箱全选效果</li> <li>循环及遍历操作</li> <li>调试器的简单使用</li> <li>典型循环的构成</li> <li>for循环配合if判断</li> <li>className的使用</li> <li>innerHTML的使用</li> <li>戛纳印象效果</li> <li>数组</li> <li>字符串连接</li> </ul> </div> <div class="summary"> <ul> <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li> <li>JavaScript出现的位置、优缺点</li> <li>变量、类型、typeof、数据类型转换、变量作用域</li> <li>闭包：什么是闭包、简单应用、闭包缺点</li> <li>运算符：算术、赋值、关系、逻辑、其他运算符</li> <li>程序流程控制：判断、循环、跳出</li> <li>命名规范：命名规范及必要性、匈牙利命名法</li> <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li> <li>定时器的使用：setInterval、setTimeout</li> <li>定时器应用：站长站导航效果</li> <li>定时器应用：自动播放的选项卡</li> <li>定时器应用：数码时钟</li> <li>程序调试方法</li> </ul> </div> <div class="summary"><ul><li>over...</li></ul></div> </div> </div> <script type="text/javascript"> window.onload=function(){ var tab=document.getElementById("tab") new Tab(tab,"mouseover");//初始化; var tab2=document.getElementById("tab2") new Tab(tab2,"click");//初始化 } </script> <script type="text/javascript"> //面向对象版本的选项卡 made by xiaomomo function Tab(obj,type){//自定义函数 this.atab=document.getElementById(obj); this.acontent=this.getByClass("content_",obj)[0]; this.summary=this.getByClass("summary",this.acontent); this.tab_inner=this.getByClass("tab_inner",obj)[0] this.ali=this.tab_inner.getElementsByTagName("li"); var that=this; for(var i=0;i<this.ali.length;i++){ this.ali[i].index=i var b=this.ali[i] /*this.ali[i].onmouseover=function(){ that.tabswitch(this.index); }*/ Tab.prototype.addEvent(this.ali[i],type,function(){that.tabswitch(this.index);}) } } Tab.prototype.tabswitch=function(k){//给自定义函数绑定tabswitch方法 for(var i=0;i<this.ali.length;i++){ this.ali[i].className="" this.summary[i].style.display="none" } this.ali[k].className="hover" this.summary[k].style.display="block" } Tab.prototype.getByClass=function(className,parents){//给自定义函数绑定getByClass方法 parents=parents || document; if(parents.getElementsByClassName){ return parents.getElementsByClassName(className); }; var nodes=parents.getElementsByTagName("*"); ret=[]; for(i=0;i<nodes.length;i++){ if(this.hasClass(nodes[i],className)) ret.push(nodes[i]); }; return ret; }; Tab.prototype.hasClass=function(node,className){//给自定义函数绑定hasClass方法 var names=node.className.split(/\s+/); for(var i=0;i<names.length;i++) { if(names[i]==className) return true }; return false }; Tab.prototype.addEvent=function(obj, type, fn){ if (obj.attachEvent) { obj[‘e‘+type+fn] = fn; obj[type+fn] = function(){obj[‘e‘+type+fn]( window.event );} obj.attachEvent( ‘on‘+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); } </script> <script type="text/javascript"> //一般做法版本的选项卡 made by xiaomomo /* var atab=document.getElementById("tab"); var acontent=getByClass("content_",atab)[0]; var summary=getByClass("summary",acontent); var tab_inner=getByClass("tab_inner",atab)[0]; var ali=tab_inner.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ ali[i].index=i ali[i].onmouseover=function(){ for(var i=0;i<ali.length;i++){ ali[i].className="" summary[i].style.display="none" } this.className="hover" summary[this.index].style.display="block" } } function getByClass(className,parents){ parents=parents || document; if(parents.getElementsByClassName){ return parents.getElementsByClassName(className); }; var nodes=document.getElementsByTagName("*"); ret=[]; for(i=0;i<nodes.length;i++){ if(hasClass(nodes[i],className)) ret.push(nodes[i]); }; return ret; }; function hasClass(node,className){ var names=node.className.split(/\s+/); for(var i=0;i<names.length;i++) { if(names[i]==className) return true }; return false }; */ </script> <script type="text/javascript"> alert("面向对象版本的选项卡跟普通做法版本的选项卡对比") </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/liujin0505/p/4378242.html
