/* * 传入id和点击时的回调函数,可以传第三个参数,就是当前tab的类名默认tabon * 主要完成tab的外观,就是当前tab的切换,完成外观切换后,会调用传入的回调函数 */ function ulTab(_id, _cb){ this.id = _id; this.cb = _cb; this.onClassName = arguments[2]||'tabon'; this.children = document.getElementById(_id).getElementsByTagName('li'); for(var i=0;i<this.children.length;i++){ this.children[i].idx = i; this.children[i].that = this; $(this.children[i]).unbind('click').bind('click', this.clicked); } } ulTab.prototype.clicked = function(){ var clickedObj; var children = this.that.children; for(var i=0;i<children.length;i++){ $(children[i]).removeClass(this.that.onClassName); if(i==this.idx) clickedObj = children[i]; } $(clickedObj).addClass(this.that.onClassName); this.that.cb(this.idx); }
new ulTab('message_tab_top', topTabCallback);
<style> .toolbar .tabs { list-style:none; margin:0; padding:0; background-color:#FFF; height:45px; width:320px; line-height:45px; } .toolbar .tabs li{ float:left; text-align:center; cursor:pointer; } .tabon{ background-color:#069; color:#FFF } </style> <div class="toolbar"> <ul class="tabs" style="margin-left:-10px; margin-top:-10px" id="message_tab_top"> <li style="width:105px" class="tabon">最近联系人</li> <li style="width:110px">在线</li> <li style="width:105px">通讯录</li> </ul> </div>
我的QQ群:
PHPer&Webgame&移动开发,群号:95303036