选项卡切换 

<!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>选项卡切换</title>
<style type="text/css">
#tab input {
    background: #999;
    border: 1px solid #F00;
}
#tab .active {
    background: #000;
    color:#FFF;
}
#tab div {
    width:400px; 
    height:300px; 
    display:none;
    padding: 10px;
    background: #CCC;
    border: 1px solid #F00;
}
</style>
</head>

<body>
<script type="text/javascript">       
window.onload = function(){
    var tab = new Tab("tab");
}

function Tab(id){
    var _this = this;
    var tabBox = document.getElementById(id);
    this.tabBtn = tabBox.getElementsByTagName('input');
    this.tabDiv = tabBox.getElementsByTagName('div');
    //console.log(this);
    for(var i=0;i<this.tabBtn.length;i++){
        this.tabBtn[i].index = i;
        this.tabBtn[i].onclick = function(){
             //注意参数this代表的是this.tabBtn[i]，即input按钮
             _this.clickBtn(this);
        };
    }
};
 //将点击的按钮以参数的形式传入
Tab.prototype.clickBtn = function(an){
    for(var j=0;j<this.tabBtn.length;j++){
    this.tabBtn[j].className='';
    this.tabDiv[j].style.display='none';
    }
    an.className='active';
    this.tabDiv[an.index].style.display='block';
};
 
</script>
<body>
    <div id="tab">
        <input type="button" value="1" class="active" />
        <input type="button" value="2" />
        <input type="button" value="3" />
        <div style="display:block;">1111111</div>
        <div>22222222</div>
        <div>33333333</div>
    </div>
</body>
</html>

 

posted @ 2017-11-02 22:28  v斌v  阅读(225)  评论(0)    收藏  举报