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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>js面向对象+一般方法的选项卡</title>
  6. <style type="text/css">
  7. * { padding:0px; margin:0px;  }
  8. #tab,#tab2{ width:450px;  margin:20px auto; font-size:12px; height:245px;}
  9. .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}
  10. .tab_inner li{ width:80px; height:30px; text-align:center; line-height:30px; float:left; cursor:pointer; }
  11. .tab_inner .hover{ background:#999; color:#000000;}
  12. .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; }
  13. .content_ .summary{ display:none; clear:both }
  14. .content_ .summary ul { padding-left: 30px; list-style-type:armenian line-height:25px;}
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <div id="tab2">
  20.     <ul class="tab_inner">
  21.         <li class="hover">栏目一</li>
  22.         <li>栏目二</li>
  23.         <li>栏目三</li>
  24.         <li>栏目四</li>
  25.     </ul>
  26.     <div class="content_">
  27.         <div class="summary" style="display:block;">
  28.           <ul>
  29.             <li>网页特效原理分析</li>
  30.             <li>响应用户操作</li>
  31.             <li>提示框效果</li>
  32.             <li>事件驱动</li>
  33.             <li>元素属性操作</li>
  34.             <li>动手编写第一个JS特效</li>
  35.             <li>引入函数</li>
  36.             <li>网页换肤效果</li>
  37.             <li>展开/收缩播放列表效果</li>
  38.           </ul>
  39.         </div>
  40.         <div class="summary">
  41.             <ul>
  42.                 <li>改变网页背景颜色</li>
  43.                 <li>函数传参</li>
  44.                 <li>高重用性函数的编写</li>
  45.                 <li>126邮箱全选效果</li>
  46.                 <li>循环及遍历操作</li>
  47.                 <li>调试器的简单使用</li>
  48.                 <li>典型循环的构成</li>
  49.                 <li>for循环配合if判断</li>
  50.                 <li>className的使用</li>
  51.                 <li>innerHTML的使用</li>
  52.                 <li>戛纳印象效果</li>
  53.                 <li>数组</li>
  54.                 <li>字符串连接</li>
  55.             </ul>
  56.         </div>
  57.         <div class="summary">
  58.             <ul>
  59.                 <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
  60.                 <li>JavaScript出现的位置、优缺点</li>
  61.                 <li>变量、类型、typeof、数据类型转换、变量作用域</li>
  62.                 <li>闭包：什么是闭包、简单应用、闭包缺点</li>
  63.                 <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
  64.                 <li>程序流程控制：判断、循环、跳出</li>
  65.                 <li>命名规范：命名规范及必要性、匈牙利命名法</li>
  66.                 <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
  67.                 <li>定时器的使用：setInterval、setTimeout</li>
  68.                 <li>定时器应用：站长站导航效果</li>
  69.                 <li>定时器应用：自动播放的选项卡</li>
  70.                 <li>定时器应用：数码时钟</li>
  71.                 <li>程序调试方法</li>
  72.             </ul>
  73.         </div>
  74.         <div class="summary">
  75.             <ul>
  76.                 <li>over...</li>
  77.             </ul>
  78.         </div>
  79.     </div>
  80. </div>
  81. <div id="tab">
  82.     <ul class="tab_inner">
  83.         <li class="hover">栏目一</li>
  84.         <li>栏目二</li>
  85.         <li>栏目三</li>
  86.         <li>栏目四</li>
  87.     </ul>
  88.     <div class="content_">
  89.         <div class="summary" style="display:block;">
  90.             <ul>
  91.                 <li>网页特效原理分析</li>
  92.                 <li>响应用户操作</li>
  93.                 <li>提示框效果</li>
  94.                 <li>事件驱动</li>
  95.                 <li>元素属性操作</li>
  96.                 <li>动手编写第一个JS特效</li>
  97.                 <li>引入函数</li>
  98.                 <li>网页换肤效果</li>
  99.                 <li>展开/收缩播放列表效果</li>
  100.             </ul>
  101.         </div>
  102.         <div class="summary">
  103.             <ul>
  104.                 <li>改变网页背景颜色</li>
  105.                 <li>函数传参</li>
  106.                 <li>高重用性函数的编写</li>
  107.                 <li>126邮箱全选效果</li>
  108.                 <li>循环及遍历操作</li>
  109.                 <li>调试器的简单使用</li>
  110.                 <li>典型循环的构成</li>
  111.                 <li>for循环配合if判断</li>
  112.                 <li>className的使用</li>
  113.                 <li>innerHTML的使用</li>
  114.                 <li>戛纳印象效果</li>
  115.                 <li>数组</li>
  116.                 <li>字符串连接</li>
  117.             </ul>
  118.         </div>
  119.         <div class="summary">
  120.             <ul>
  121.                 <li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源</li>
  122.                 <li>JavaScript出现的位置、优缺点</li>
  123.                 <li>变量、类型、typeof、数据类型转换、变量作用域</li>
  124.                 <li>闭包：什么是闭包、简单应用、闭包缺点</li>
  125.                 <li>运算符：算术、赋值、关系、逻辑、其他运算符</li>
  126.                 <li>程序流程控制：判断、循环、跳出</li>
  127.                 <li>命名规范：命名规范及必要性、匈牙利命名法</li>
  128.                 <li>函数详解：函数构成、调用、事件、传参数、可变参、返回值</li>
  129.                 <li>定时器的使用：setInterval、setTimeout</li>
  130.                 <li>定时器应用：站长站导航效果</li>
  131.                 <li>定时器应用：自动播放的选项卡</li>
  132.                 <li>定时器应用：数码时钟</li>
  133.                 <li>程序调试方法</li>
  134.             </ul>
  135.         </div>
  136.         <div class="summary">
  137.             <ul>
  138.                 <li>over...</li>
  139.             </ul>
  140.         </div>
  141.     </div>
  142. </div>
  143. <script type="text/javascript">
  144. //面向对象版本选项卡
  145.     function Tab(obj,type){
  146.         this.tab=document.getElementById(obj);
  147.         this.tab_inner=this.getByClass("tab_inner",obj)[0];
  148.         this.tab_li=this.tab_inner.getElementsByTagName("li");
  149.         this.content_=this.getByClass("content_",obj)[0];
  150.         this.summary=this.getByClass("summary",this.content_);
  151.         var that=this;
  152.         for (var i=0;i<this.tab_li.length;i++){
  153.             this.tab_li[i].index=i;
  154.             Tab.prototype.addHandler(this.tab_li[i],type,function(){that.switch(this.index);});
  155.         }
  156.     }
  157.     Tab.prototype.getByClass=function(className,parents){
  158.         parents=parents||document;
  159.         if(parents.getElementsByClassName){
  160.             return parents.getElementsByClassName(className);
  161.         }
  162.         var nodes=document.getElementsByTagName("*");
  163.         ret=[];
  164.         for (var i=0;i<nodes.length;i++){
  165.             if(hasClass(nodes[i],className)){
  166.                 ret.push(nodes[i]);
  167.             }
  168.         }
  169.         return ret;
  170.     }
  171.     Tab.prototype.hasClass=function(node,className){
  172.         var names=node.className.split(/\st/);
  173.         for(var i=0;i<names.lemgth;i++){
  174.             if(names[i]==className){
  175.                 return true;
  176.             }
  177.         }
  178.         return false;
  179.     }
  180.     Tab.prototype.addHandler=function(obj,type,fn){
  181.         if (obj.attachEvent)
  182.         {
  183.             obj['e'+type+fn] = fn;
  184.             obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
  185.             obj.attachEvent( 'on'+type, obj[type+fn] );
  186.         } else{
  187.             obj.addEventListener( type, fn, false );
  188.         }
  189.     }
  190.     Tab.prototype.switch=function(n){
  191.         for (var i=0;i<this.tab_li.length;i++){
  192.             this.tab_li[i].className="";
  193.             this.summary[i].style.display="none";
  194.         }
  195.         this.tab_li[n].className="hover";
  196.         this.summary[n].style.display="block";
  197.     }
  198. </script>
  199. <script type="text/javascript">
  200.     window.onload=function(){
  201.         var tab=document.getElementById("tab")
  202.         new Tab(tab,"mouseover");
  203.         var tab2=document.getElementById("tab2")
  204.         new Tab(tab2,"click");
  205.     }
  206. </script>
  207. <!--script type="text/javascript">
  208. //一般做法版本的选项卡
  209. window.onload=function(){
  210.     var tab=document.getElementById("tab");
  211.     var tab_inner=getByClass("tab_inner",tab)[0];
  212.     var tab_li=tab_inner.getElementsByTagName("li");
  213.     var content_=getByClass("content_",tab)[0];
  214.     var summary=getByClass("summary",content_);
  215.     function getByClass(className,parents){   //用className获取元素
  216.         parents=parents||document;
  217.         if(parents.getElementsByClassName){
  218.             return parents.getElementsByClassName(className);
  219.         }
  220.         var nodes=document.getElementsByTagName("*");
  221.         ret=[];
  222.         for (var i=0;i<nodes.length;i++){
  223.             if(hasClass(nodes[i],className)){
  224.                 ret.push(nodes[i]);
  225.             }
  226.         }
  227.         return ret;
  228.     }
  229.     function hasClass(node,className){
  230.         var names=node.className.split(/\st/);
  231.         for(var i=0;i<names.lemgth;i++){
  232.             if(names[i]==className){
  233.                 return true;
  234.             }
  235.         }
  236.         return false;
  237.     }
  238.     for (var i=0;i<tab_li.length;i++){   //效果实现
  239.         tab_li[i].index=i;
  240.         tab_li[i].onmouseover=function(){
  241.             for (i=0;i<tab_li.length;i++){
  242.                 tab_li[i].className="";
  243.                 summary[i].style.display="none";
  244.             }
  245.             this.className="hover";
  246.             summary[this.index].style.display="block";
  247.         }
  248.     }
  249. }
  250. </script-->
  251. </body>
  252. </html>

　　

js面向对象+一般方法的选项卡的更多相关文章

  1. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...

  2. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

  3. js面向过程改写成面向对象--通用方法

    响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...

  4. js面向对象之公有、私有、静态属性和方法详解

    现下,javascript大行其道,对于网站开发人员来说,javascript是必需掌据的一门语言,但随着jquery等框架的流行和使用,许多人对于原生javascript缺乏深入的理解,习惯了函数式 ...

  5. js面向对象自定义MyString()的构造器函数，实现内建String()属性和方法：

    js面向对象自定义MyString()的构造器函数,实现内建String()属性和方法: var s = new MyString('hello'); s.length; s[0]; // " ...

  6. JS面向对象编程，对象，属性，方法。

    document.write('<script type="text/javascript" src="http://api.map.baidu.com/api?v ...

  7. js面向对象初步探究（上） js面向对象的5种写方法

    非常长一段时间看网上大神的JS代码特别吃力.那种面向对象的写法方式让人看得云里来雾里去.于是就研究了一下JS面向对象.因为是初学,就将自己在网上找到的资料整理一下,作为记忆. js面向对象的5种写方法 ...

  8. js面向对象 多种创建对象方法小结

    转自js面向对象 多种创建对象方法小结 1.对象字面量 var clock={ hour:12, minute:10, second:10, showTime:function(){ alert(th ...

  9. JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)

    JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...

随机推荐

  1. jquery php 百度搜索框智能提示效果

    这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...

  2. StackExchange.Redis 使用 - 事件（五）

    ConnectionMultiplexer 可以注册如下事件 ConfigurationChanged - 配置更改时 ConfigurationChangedBroadcast - 通过发布订阅更新 ...

  3. Android组件系列----ContentProvider内容提供商【5】

    2.执行query()方法,查询全部记录(眼下一共两条记录).后台输出效果例如以下: 经測试,其它方法也都是能够运行的. 事实证明,新建的另外一个project文件ContentResolverTes ...

  4. 由iPhone emoji问题牵出UTF-16编码，UTF-8编码查询

    前言 iOS平台,系统输入法emoji表达.表达式不能在很多其他平台上显示,尤其是在Android.Symbian系统.我决定到底要探索1:我指的是一些知识: (注意:该博文已经如果读者已经了解utf ...

  5. 采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度

    采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行 ...

  6. web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)

    web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...

  7. 将android界面背景设置为黑色

    屏幕背景设置为黑色的几种方式: 新建项目时候 第二次next之后(不同sdk版本号可能不同),Background Color项点击可选. 开公布局文件,选择视图查看 就是下边二个选项卡中的第一个(G ...

  8. Linux通过使用Sambaserver示例

    Linux通过使用Sambaserver示例 实验环境: Vbox下一个.Rehat5虚拟机 使用sambaserver 目的:使用sambaserver将文件上传到server上 [root@rh5 ...

  9. 彩色图像--色彩空间 CMY(K)场地

    得知DIP文章63日 转载请注明文章出处:http://blog.csdn.net/tonyshengtan .出于尊重文章作者的劳动,转载请标明出处!文章代码已托管.欢迎共同开发:https://g ...

  10. Grunt 之 Connect

    前端开发 Grunt 之 Connect 在前端开发过程中,我们需要在开发过程中,将开发中的站点部署到服务器上,然后,在浏览器中查看实际的效果,在 Grunt 环境下,可以直接使用集成在 Grunt ...