选项卡（面向对象）

<style>
#div1 input { background: #ccc; }
#div1 .active { background: yellow; }
#div1 div { width:200px; height: 200px; background: #ccc; display: none; }
</style>


<script>
window.onload = function()
{
　　var oTab = new TabSwitch ('div1');
};

function TabSwitch(id)
{
　　var oDiv = document.getElementById('div1');
　　this.aBtn = oDiv.getElementsByTagName('input');
　　this.aDiv = oDiv.getElementsByTagName('div');
　　var i=0;
　　var _this = this;

　　for(i=0; i<this.aBtn.length;i++)
　　{
　　　　this.aBtn[i].index = i;
　　　　this.aBtn[i].onclick = function ()
　　　　{
　　　　　　_this.tab(this);
　　　　};
　　}
};

TabSwitch.prototype.tab = function (oBtn)
{
　　for(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>

<body>
<div id="div1">
　　<input class="active" type="button" value="教育"/>
　　<input type="button" value="财经"/>
　　<input type="button" value="aaa"/>
　　<div style="display:block;">lasdfasdfds</div>
　　<div>2xzcvxzcv</div>
　　<div>53332342345</div>
</div>
</body>

posted @ 2017-04-26 20:16  少海  阅读(126)  评论(0)    收藏  举报