tab切换类

/*
 * 传入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 

转载于:https://www.cnblogs.com/lein317/p/5067596.html