ゞ╃漃瘼青賰
——我用青春换未来！我比别人笨，但是我比别人努力！
js面向对象+一般方法的选项卡

这个是我练习js面向对象的最满意的实例，因为其中的所有内容都理解，虽然有些模仿他人所写的，但是这个都是我完全理解之后写下来的，还请大家多多指正。

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

 

posted on 2012-08-18 21:45  ゞ╃漃瘼青賰  阅读(1400)  评论(5)  编辑  收藏  举报

Copyright © 2024 ゞ╃漃瘼青賰
Powered by .NET 9.0 on Kubernetes Powered By博客园