面向对象的选项卡

来源：互联网发布：淘宝美工接单平台编辑：程序博客网时间：2024/04/27 16:49
<!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=gb2312" /><title>无标题文档</title><style>*{padding:0;margin:0;}#box div, #box2 div{width:200px;height:200px;border:1px solid #000;display:none;}#box div.show, #box2 div.show{display:block;}.active{background:yellow;}</style><script>function Tab(id) {    this.oParent = document.getElementById(id);    this.aBtn = this.oParent.getElementsByTagName('input');    this.aBox = this.oParent.getElementsByTagName('div');    this.iNow = 0;}Tab.prototype.init = function() {    var _this = this;    for ( var i = 0; i < this.aBtn.length; i++ ) {        this.aBtn[i].index = i;        this.aBtn[i].onclick = function () {            _this.change(this);        };    }}Tab.prototype.change = function (obj) {    for ( var i = 0; i < this.aBtn.length; i++ ) {        this.aBtn[i].className = '';        this.aBox[i].className = '';    }    obj.className = 'active';    this.aBox[obj.index].className = 'show';}Tab.prototype.autoplay = function () {    var _this = this;    setInterval(function () {        _this.iNow = _this.iNow === _this.aBtn.length - 1 ? 0 : ++_this.iNow;        console.log(_this.iNow);        for ( var i = 0; i < _this.aBtn.length; i++ ) {            _this.aBtn[i].className = '';            _this.aBox[i].className = '';        }        _this.aBtn[_this.iNow].className = 'active';        _this.aBox[_this.iNow].className = 'show';    }, 2000);}window.onload = function () {    var t1 = new Tab('box');    t1.init();    var t2 = new Tab('box2');    t2.init();    t2.autoplay();}</script></head><body><div id="box">    <input class="active" type="button" value="首页" />    <input type="button" value="体育" />    <input type="button" value="娱乐" />    <div class="show">首页</div>    <div>体育</div>    <div>娱乐</div></div><div id="box2">    <input class="active" type="button" value="首页" />    <input type="button" value="体育" />    <input type="button" value="娱乐" />    <div class="show">首页</div>    <div>体育</div>    <div>娱乐</div></div></body></html>
0 0