zoukankan      html  css  js  c++  java
  • JavaScript实现选项卡(三种方法)

    本文实例讲述了js选项卡的实现方法。

    一、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">选项1</div>
        <div>选项2</div>
        <div>选项3</div>
    </div>
    

    二、css样式:

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

    三、js代码:

    方法一:

    for(var i=0;i<aInput.length;i++){
    		aInput[i].index = i;
    		aInput[i].onclick = function(){
    			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';
    		};
    }
    

    方法二(采用立即执行函数):

    for(var i=0;i<aInput.length;i++){
    	 (function(i){
    		aInput[i].onclick = function(){
    			for( var j=0;j<aDiv.length;j++){
    				aInput[j].className = " ";
    				aDiv[j].style.display = "none";
    			}
    				aInput[i].className = "active ";
    				aDiv[i].style.display = "block";
    		};
    	 })(i); 
    };
    

    方法三(for循环+if判断当前点击与自定义数组是否匹配):

    for(var i=0;i<aInput.length;i++){
    	aInput[i].onclick = function(){
    		for( var j=0;j<aDiv.length;j++){
    			aInput[j].className = " ";
    			aDiv[j].style.display = "none";
    			this.className = "active ";
    			// 判断当前点击是按钮数组中的哪一个 
    			if(this == aInput[j]) { 
    				aDiv[j].style.display = "block";
    			} 
    		};
    	};	
    };
  • 相关阅读:
    百度brpc 压测工具rpc_press解析
    Reactor反应器模式 (epoll)
    hive和hbase的区别
    Hive和HBase
    入门HBase,看这一篇就够了
    Docker保存修改后的镜像
    怎样将本地文件上传到docker容器
    Docker 安装tomcat访问空白页问题解决办法
    Centos中查看系统信息的常用命令
    Docker 镜像加速
  • 原文地址:https://www.cnblogs.com/cckui/p/7465669.html
Copyright © 2011-2022 走看看