面向对象选项卡

最新推荐文章于 2024-06-19 14:45:15 发布

chengweng2602

最新推荐文章于 2024-06-19 14:45:15 发布

阅读量84

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://my.oschina.net/u/3147332/blog/807092

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}
.active{ background:red;}
</style>
<script>

/*window.onload = function(){
	var oParent = document.getElementById('div1');
	var aInput = oParent.getElementsByTagName('input');
	var aDiv = oParent.getElementsByTagName('div');
	
	for(var i=0;i<aInput.length;i++){
		aInput[i].index = i;
		aInput[i].onclick = function(){
			for(var i=0;i<aInput.length;i++){
				aInput[i].className = '';
				aDiv[i].style.display = 'none';
			}
			this.className = 'active';
			aDiv[this.index].style.display = 'block';
		};
	}
	
};*/

window.onload = function(){
	
	var t1 = new Tab();
	t1.init();
	
};

function Tab(){
	this.oParent = document.getElementById('div1');
	this.aInput = this.oParent.getElementsByTagName('input');
	this.aDiv = this.oParent.getElementsByTagName('div');
}

Tab.prototype.init = function(){
	var This = this;
	for(var i=0;i<this.aInput.length;i++){
		This.aInput[i].index = i;
		This.aInput[i].onclick = function(){
			This.change(this);
		};
	}
};

Tab.prototype.change = function(obj){
	for(var i=0;i<this.aInput.length;i++){
		this.aInput[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	obj.className = 'active';
	this.aDiv[obj.index].style.display = 'block';
};

</script>
</head>

<body>
<div id="div1">
	<input class="active" type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <div style="display:block">11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
</body>
</html>

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

转载于:https://my.oschina.net/u/3147332/blog/807092

chengweng2602

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面向对象选项卡

1 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标...
复制链接

扫一扫