选项卡 bug版本

原创 可怜兮兮 随笔 待整理 845阅读 2014-08-26 16:25:55 举报

[code]<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0; }
ol,ul{ list-style:none; }
.clearfix:after{
display:block;
overflow:hidden;
clear:both;
}
.clearfix{
zoom:1;
}

aaa{

width:400px;
margin:100px auto;
}

ol{
width:90%;
height:40px;
background:#444444;
padding:0 5%;
}
ol li{
float:left;
color:#fff;
padding:0 16px;
height:40px;
line-height:40px;
}
ol li.active{
background:#CCC;
}

ul{
width:90%;
height:auto;
padding:5%;
background:#ccc;
}
ul li{
display:none;
}
ul li.show{
display:block;
}
</style>
</head>

<body>
<div id="aaa">
<ol class="clearfix">
<li class="active">曼联对</li>
<li>比达尔</li>
<li>的兴趣</li>
<li>是真实的</li>
</ol>
<ul>
<li class="show">1111</li>
<li>2222</li>
<li>3333</li>
<li>444</li>
</ul>
</div>
</body>
<script>
window.onload=function(){
var tab=new Tab();
tab.int({
id:'aaa',
getTag:'getTag',
getTaga:function(aaa){
aaa.Box=document.getElementById('aaa');
aaa.oL=aaa.Box.getElementsByTagName('ol')[0];
aaa.Btn=aaa.oL.children;

        aaa.ul=aaa.Box.getElementsByTagName('ul')[0];
        aaa.aLi=aaa.ul.children;
    }
});

}

function Tab(opt){
this.timer=null;
this.iNow=0;
var _this=this;
opt=opt||{};

if(opt.auto==true){
    this.timer=setInterval(function(){
        _this.autoPlay();
    },1000);    
}

this.settings={
    btnName:'active',
    showName:'show'
}   

};

Tab.prototype.int=function(options){
extend(this.settings,options);

if(options.getTag=='getTag'){
    options.getTaga(this)   
}else{
    this.getTag();
}
this.data();

};
Tab.prototype.getTag=function(){
this.Box=document.getElementById(options.id);
this.oL=this.Box.getElementsByTagName('ol')[0];
this.Btn=this.oL.children;

this.ul=this.Box.getElementsByTagName('ul')[0];
this.aLi=this.ul.children;

}
Tab.prototype.data=function(){
var _this=this;
for(var i=0; i<_this.Btn.length; i++){
_this.Btn[i].index=i;
_this.Btn[i].onclick=function(){

        _this.iNow=this.index;
        _this.fn(_this.iNow)
    };
};
this.fn=function(now){
    for(var i=0; i<_this.Btn.length; i++){
        _this.Btn[i].className='';
        _this.aLi[i].style.display='none';  
    };
    _this.Btn[now].className=_this.settings.btnName;
    _this.aLi[now].style.display='block';   
};

};

Tab.prototype.autoPlay=function(){
if(this.iNow==this.Btn.length-1){
this.iNow=0;
}else{
this.iNow++;
}
this.fn(this.iNow);
}
function extend(obj1,obj2){
for(var attr in obj2){
obj1[attr]=obj2[attr]
}
};

</script>
</html>
[/code]代码片段 1

评论 ( 1 )
最新评论
陈陈陈大文 2017-08-23 09:09:22 1F

的确,,,有BUG