面向对象 选项卡

Posted sunnywindycloudy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象 选项卡相关的知识，希望对你有一定的参考价值。

<!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" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>面向对象 选项卡</title>
    <style>
        #div1 input{background: white;}
        #div1 input.active{background: yellow;}
        #div1 div{width: 200px;height: 200px; background: #ccc;display: none;}

    </style>
    <script>
window.onload=function(){
    new TabSwitch(‘div1‘);
}

  function TabSwitch(id){
      var _this=this;
        var oDiv=document.getElementById(id);

        this.aBtn=oDiv.getElementsByTagName(‘input‘);
        this.aDiv=oDiv.getElementsByTagName(‘div‘);

        for(var i=0;i<this.aBtn.length;i++){
            this.aBtn[i].index=i;
            this.aBtn[i].onclick=function(){
                _this.fnClick(this);
            } 
        }
   }
   
   TabSwitch.prototype.fnClick=function (oBtn){
        for(var i=0;i<this.aBtn.length;i++){
            this.aBtn[i].className=‘‘;
            this.aDiv[i].style.display=‘none‘;
        }
        oBtn.className=‘active‘;
        this.aDiv[oBtn.index].style.display=‘block‘;
    }


    </script>
    </head>

    <body>
        <div id="div1">
            <input class="active" type="button" value="aaa"/>
            <input type="button" value="bbb"/>
            <input type="button" value="ccc"/>
<div style="display: block;">aaa</div>
<div>bbbb</div>
<div>cccc</div>
        </div>
     </body>
    </html>

 

以上是关于面向对象 选项卡的主要内容，如果未能解决你的问题，请参考以下文章

js面向对象的选项卡

删除选项卡时在 ActionBar 选项卡片段中运行代码

以选项卡的故事扯扯js面向对象

选项卡执行android中下一个片段中存在的代码

纯JS制作选项卡--JavaScript实例集锦（初学）

面向对象选项卡组件