zoukankan      html  css  js  c++  java
  • 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;
    		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="105px" class="tabon">最近联系人</li>
                <li style="110px">在线</li>
                <li style="105px">通讯录</li>
            </ul>
        </div>



    我的QQ群:

    PHPer&Webgame&移动开发,群号:95303036 

  • 相关阅读:
    Android 中的selector
    Android 中SimpleDateFormat的使用注意
    Android 和iOS中 View的滚动
    Android 和iOS中 Gesture 和 Touch
    iOS 的UIWindow 类研究
    iOS keyChain 的使用
    关于Intent ,Task, Activity的理解
    Android Broadcast 和 iOS Notification
    Android 程序中得到root activity的引用
    ios中的addChildViewController 和 android中的fragment
  • 原文地址:https://www.cnblogs.com/lein317/p/5067596.html
Copyright © 2011-2022 走看看