zoukankan      html  css  js  c++  java
  • 面向对象选项卡

    HTML

    <div id="div1">
    	<input class="active" type="button" value="1" />
    	<input type="button" value="2" />
    	<input type="button" value="3" />
    	<div style="display: block;">11111</div>
    	<div>22222</div>
    	<div>33333</div>
    </div>
    <div id="div2">
    	<input class="active" type="button" value="1" />
    	<input type="button" value="2" />
    	<input type="button" value="3" />
    	<div style="display: block;">11111</div>
    	<div>22222</div>
    	<div>33333</div>
    </div>

    CSS

    #div1 div,
    #div2 div{
    	border: 1px solid #000;
    	 200px;
    	height: 200px;
    	display: none;
    }
    .active{
    	background: red;
    }			
    

    JS

    //var oParent=document.getElementById('div1');
    //var aInput=oParent.getElementsByTagName('input');
    //var aDiv=oParent.getElementsByTagName('div');
    //init();
    //function init(){
    //	for (var i=0;i<aInput.length;i++) {
    //		aInput[i].index=i;
    //		aInput[i].onclick=change;
    //	}
    //}
    //function change(){
    //	for (var i=0;i<aInput.length;i++) {
    //		aInput[i].className='';
    //		aDiv[i].style.display='none';
    //	}
    //	this.className='active';
    //	aDiv[this.index].style.display='block';
    //}
    
    //过程改为面向对象
    //函数就是方法
    //onload中创建对象
    
    //全局变量就是属性
    //类似于class类例如student指学生
    function Tab(uid){
    	this.oParent=document.getElementById(uid);
    	this.aInput=this.oParent.getElementsByTagName('input');
    	this.aDiv=this.oParent.getElementsByTagName('div');
    	this.iNow=0;
    }
    Tab.prototype.demo=function(){
    	var This=this;
    	for (var i=0;i<this.aInput.length;i++) {
    		this.aInput[i].index=i;
    		this.aInput[i].onclick=function(){
    			This.change(this);
    		};
    	}
    }
    Tab.prototype.change=function(that){
    	for (var i=0;i<this.aInput.length;i++) {
    		this.aInput[i].className='';
    		this.aDiv[i].style.display='none';
    	}
    	that.className='active';
    	this.aDiv[that.index].style.display='block';
    }
    //自动切换
    Tab.prototype.autoPlay=function(){
    	var This=this;
    	setInterval(function(){
    		if (This.iNow==This.aInput.length-1) {
    			This.iNow=0;
    		} else{
    			This.iNow++;
    		}
    		for (var i=0;i<This.aInput.length;i++) {
    			This.aInput[i].className='';
    			This.aDiv[i].style.display='none';
    		}
    		This.aInput[This.iNow].className='active';
    		This.aDiv[This.iNow].style.display='block';
    	},2000)
    }
    //创建单例 如具体学生某某
    var tab=new Tab('div1');
    var tab1=new Tab('div2');
    tab.demo();
    tab1.demo();
    tab1.autoPlay();
    

      

  • 相关阅读:
    Python学习札记(十五) 高级特性1 切片
    LeetCode Longest Substring Without Repeating Characters
    Python学习札记(十四) Function4 递归函数 & Hanoi Tower
    single number和变体
    tusen 刷题
    实验室网站
    leetcode 76. Minimum Window Substring
    leetcode 4. Median of Two Sorted Arrays
    leetcode 200. Number of Islands 、694 Number of Distinct Islands 、695. Max Area of Island 、130. Surrounded Regions 、434. Number of Islands II(lintcode) 并查集 、178. Graph Valid Tree(lintcode)
    刷题注意事项
  • 原文地址:https://www.cnblogs.com/yangxue72/p/8358847.html
Copyright © 2011-2022 走看看