<!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. Windows PHone 8 获取硬件信息

    /// <summary> /// 获取系统信息 /// </summary> private string GetDeviceInfo() { StringBuilder s ...

  2. Docker简明教程（转）

    Docker自从诞生以来就一直备受追捧,学习Docker是一件很炫酷.很有意思的事情.我希望通过这篇文章能够让大家快速地入门Docker,并有一些学习成果来激发自己的学习兴趣.我也只是一个在Docke ...

  3. Unity带有网络功能——创建服务，并连接到一个特定的服务

    游戏本身需要在网络上创建服务,然后其他的游戏能够连接到这个服务,此外真实场景现在玩同样的游戏效果一起. 该方法是创建一个服务呼叫Network.InitializeServer( ): 是Networ ...

  4. OCP-1Z0-051-标题决心-文章2称号

    2. View the Exhibit to examine the description for the SALES table. Which views can have all DML ope ...

  5. emacs quick open and jump file (or buffer) which name is current word

    Sometime, we need to open a file or buffer which name begin with current word in emacs. Here I give ...

  6. Javascript标准类型的方法集

    1 array.concat(item...) concat方法会产生一个新数组,将一个或多个item附加在数组之后 var a = ['a', 'b', 'c'] var b = ['x', 'y' ...

  7. [jQuery1.9]Cannot read property ‘msie’ of undefined错误的解决方法

    原文:[jQuery1.9]Cannot read property 'msie' of undefined错误的解决方法 $.browser在jQuery1.9里被删除了,所以项目的js代码里用到$ ...

  8. JavaScript--基于对象的脚本语言学习笔记(三)

    事件处理器 1.一个数据校验表单的例程 <html> <head> <title>js练习</title> <meta http-equiv=&q ...

  9. 【软件project】生存期模型（含图）

    为了反映软件生存周期内各个工作应怎样组织,各阶段怎样衔接,须要软件开发模型给出直观图示表达.软件开发模型是软件思想的详细化,是实施在过程模块中的软件开发方法和工具. 以下来介绍开发模型的特点以及他们的 ...

  10. 编程算法 - 求1+2+...+n(函数指针) 代码(C++)

    求1+2+...+n(函数指针) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 求1+2+...+n, 要求不能使用乘除法\for\whi ...