js面向对象之选项卡的实现
来源:互联网 发布:windows阻止控件安装 编辑:程序博客网 时间:2024/04/26 21:10
<!DOCTYPE html>
<html>
<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;">
<p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</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;">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</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("p");
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>
<html>
<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;">
<p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</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;">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</div>
<div class="summary">
<p>内容</p>
</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("p");
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>
0 0
- js面向对象之选项卡的实现
- js使用面向对象实现选项卡
- JS 面向对象选项卡
- js面向对象---选项卡
- 用js面向对象写的选项卡
- js面向对象选项卡(this的使用)
- 面向对象的选项卡
- 面向对象的选项卡
- 面向对象的选项卡
- js选项卡修改成面向对象
- JavaScript 面向对象之选项卡
- 每日一个js实例7--通过面向对象实现选项卡
- 面向对象2--选项卡的改写
- 基于面向对象的选项卡
- js面向过程的选项卡
- JS基础 面向对象方式写选项卡
- JS编程练习之选项卡的实现
- js之面向对象
- 北斗地基增强系统完成框架网基准站设备招标
- java多线程(一)Race Condition现象及产生的原因
- tftp协议的实现
- 设计一个聊天服务器
- 高仿qq照片选择界面,哈哈
- js面向对象之选项卡的实现
- 接口回调,我迷糊了好长时间
- 浅谈 SOAP
- 8-27
- 整数拆分问题(从O(n^2优化到O(n*sqrt(n))
- mybatis中$和#的区别
- 批处理删除今天以前的同文件下的TXT文件
- java多线程(二)锁对象
- Cookie/Session机制详解