zoukankan      html  css  js  c++  java
  • 简易选项卡面向对象加事件委托方式实现

      选项卡,都不陌生,今天把之前的代码翻出来重写了下。不多说了,直接上代码

    <script>
    	function Tab(){
    		this.init.apply(this,arguments);
    	}
    	
    	Tab.prototype = {
    		/*
    			初始化方法
    			获取html元素(视图),并绑定事件
    		*/
    		init:function(){
    			this.tab = document.getElementById('tab');
    			this.tabs = tab.getElementsByTagName('li');
    			this.contents = document.getElementById('content').getElementsByTagName('ul');
    			
    			for(var i=0;i<this.tabs.length;i++){
    				this.tabs[i].index = i;
    			}
    			
    			this.addListener(this.tab,'click',this.bind(this,this.showTab));
    		},
    		/*
    			改变函数func的执行上下文
    		*/
    		bind:function(obj,func){
    			return function(e){
    				func.apply(obj,arguments);
    			}
    		},
    		/*
    			通用事件监听方法兼容w3c和IE
    		*/
    		addListener:function(ele,envtype,handler,isBubble){
    			if(ele.addEventListener){
    				ele.addEventListener(envtype,handler,isBubble);
    			}else if(ele.attachEvent){
    				ele.attachEvent("on" + envtype,handler);
    			}else{
    				ele["on" + enctype] = handler;
    			}
    		},
    		/*
    			选项卡的业务逻辑
    		*/
    		showTab:function(e){
    			var event = e || window.event;
    			var targetObj = event.target || event.srcElement;
    			if(targetObj.nodeName == 'LI'){
    				for(var i=0;i<this.tabs.length;i++){
    				this.tabs[i].className = "";
    			  }
    				targetObj.className = 'current';
    				for(var i=0;i<this.contents.length;i++){
    					this.contents[i].style.display = 'none';
    				}
    				this.contents[targetObj.index].style.display = 'block';
    			}
    		}
    	}
    	
    	window.onload = function(){
    		new Tab();
    	}
    </script>
    

      

  • 相关阅读:
    java.lang.NoClassDefFoundError: TagSupport 错误
    ${pageContext.request.contextPath}的作用
    JS获取table表格任意单元格值
    数据库导出为Excel
    requestScope含义
    每种创伤,都是另一种成熟
    关于AJAX
    the public type xxx must be defined in its own file
    MyEclipse取消Show in Breadcrumb的方法
    Sql2005里获取表的结构SQL
  • 原文地址:https://www.cnblogs.com/submerge/p/4445134.html
Copyright © 2011-2022 走看看