<!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=gb2312" />

<title>js面向对象+一般方法的选项卡</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">

//面向对象版本选项卡

    function Tab(obj,type){

        this.tab=document.getElementById(obj);

        this.tab_inner=this.getByClass("tab_inner",obj)[0];

        this.tab_li=this.tab_inner.getElementsByTagName("li");

        this.content_=this.getByClass("content_",obj)[0];

        this.summary=this.getByClass("summary",this.content_);

        var that=this;

        for (var i=0;i<this.tab_li.length;i++){

            this.tab_li[i].index=i;

            Tab.prototype.addHandler(this.tab_li[i],type,function(){that.switch(this.index);});

        }

    }

    Tab.prototype.getByClass=function(className,parents){

        parents=parents||document;

        if(parents.getElementsByClassName){

            return parents.getElementsByClassName(className);

        }

        var nodes=document.getElementsByTagName("*");

        ret=[];

        for (var i=0;i<nodes.length;i++){

            if(hasClass(nodes[i],className)){

                ret.push(nodes[i]);

            }

        }

        return ret;

    }

    Tab.prototype.hasClass=function(node,className){

        var names=node.className.split(/\st/);

        for(var i=0;i<names.lemgth;i++){

            if(names[i]==className){

                return true;

            }

        }

        return false;

    }

    Tab.prototype.addHandler=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 );

        }

    }

    Tab.prototype.switch=function(n){

        for (var i=0;i<this.tab_li.length;i++){

            this.tab_li[i].className="";

            this.summary[i].style.display="none";

        }

        this.tab_li[n].className="hover";

        this.summary[n].style.display="block";

    }

</script>

<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">

//一般做法版本的选项卡

window.onload=function(){

    var tab=document.getElementById("tab");

    var tab_inner=getByClass("tab_inner",tab)[0];

    var tab_li=tab_inner.getElementsByTagName("li");

    var content_=getByClass("content_",tab)[0];

    var summary=getByClass("summary",content_);

    function getByClass(className,parents){   //用className获取元素

        parents=parents||document;

        if(parents.getElementsByClassName){

            return parents.getElementsByClassName(className);

        }

        var nodes=document.getElementsByTagName("*");

        ret=[];

        for (var 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(/\st/);

        for(var i=0;i<names.lemgth;i++){

            if(names[i]==className){

                return true;

            }

        }

        return false;

    }

    for (var i=0;i<tab_li.length;i++){   //效果实现

        tab_li[i].index=i;

        tab_li[i].onmouseover=function(){

            for (i=0;i<tab_li.length;i++){

                tab_li[i].className="";

                summary[i].style.display="none";

            }

            this.className="hover";

            summary[this.index].style.display="block";

        }

    }

}

</script-->

</body>

</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. 【ASP.NET】判断访问网站的客户端是PC还是手机

    原文:[ASP.NET]判断访问网站的客户端是PC还是手机 主要就是通过客户端传递的User-agent来判断访问网站的客户端是PC还是手机,.NET中就是Request.ServerVariable ...

  2. javascript 模块化编程 1

    var myModule=(function(){ var models={}; function define(name,deps,cb){ var tk=[]; for(var i=0,l=dep ...

  3. 淘宝异构数据源数据交换工具 DataX

    淘宝异构数据源数据交换工具 DataX 阅读目录 DataX是什么? DataX用来解决什么? DataX特点? DataX结构模式(框架+插件) DataX在淘宝的运用 DataX是什么? Data ...

  4. 北京设计模式学习组bjdp.org第7次活动(2013.08.04)回顾会纪要

    时间:2013.08.04,9am-7pm 地点:北京龙泉寺(北京凤凰岭风景区内) 参加人数:北京龙泉寺信息中心(20人).北京设计模式学习组(9人) 活动要点: 1)寺院巡礼:义工师兄带领参观寺院. ...

  5. 准确率和召回率(precision&amp;recall)

    在机器学习.推荐系统.信息检索.自然语言处理.多媒体视觉等领域,常常会用到准确率(precision).召回率(recall).F-measure.F1-score 来评价算法的准确性. 一.准确率和 ...

  6. Cts框架解析(7)-任务运行的调度室

    TestInvocation /** * {@inheritDoc} */ @Override public void invoke(ITestDevice device, IConfiguratio ...

  7. JAVA —— 文件输入输出

    import java.io.*; public class FileIO { public static void main(String[] args) { //1.相对路径 File testF ...

  8. CentOS7 安装Bind

    简要记录安装Bind的过程以及遇到的问题 一. 虚拟机准备 准备了2台虚拟机,都是装的CentOS7 64_1的IP地址为192.168.1.160,2的地址为161.161作为DNS服务器. 二.下 ...

  9. webserver实现

    最近的工作需求client和server使用https协议进行通讯,我负责client编写程序,在操作系统的-depth理解认为一旦前webserver实现,整理代码: #include"a ...

  10. java缓存技术（转）

    最近在做java缓存,了解了一下.以下仅是对map对方式讨论.没有对点阵图阵讨论.作缓存要做以下2点: 1:清理及更新缓存时机的处理:   . 虚拟机内存不足,清理缓存   .. 缓存时间超时,或访问 ...