閉パッケージの実例

1561 ワード

<!DOCTYPE HTML>
<html>
<head><title> </title>

<style>
.divtab{
	width:200px;
	height:20px;
	background:red;
}

.divtab li {
	float:left;
	list-style-type:none;
	background:#ccc;
	display:block;
	width:50px;
	border:1px solid yellow;
}
.divtab  .current{
	background:#999;
}
.divcon {
	width:200px;
	height:200px;
	background:#ddd;
}
#con div{
	display:none;
}
</style>

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>

<body>
<div class="divtab">
<ul id="ultab">	
<li>TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
</div>
<div class="divcon">
<div id="con">
	<div> 1</div>
	<div> 2</div>
	<div> 3</div>
</div>
<script>

/*
	(function (){

		var oUltab = document.getElementById('ultab');
		var oli = oUltab.getElementsByTagName('li');
		for(i=0;i<oli.length;i++){
			console.log(i);
			oli[i].onclick = (function(m){
					var j=m;
								return function(){
									console.log(j);	
								}
			})(i)
		}
	})();
*/
	(function (){

		var oUltab = document.getElementById('ultab');
		var oli = oUltab.getElementsByTagName('li');
		for(i=0;i<oli.length;i++){
			console.log(i);
			oli[i].onclick = (function(i){

								return function(){
									console.log(i);	
								}
			})(i)
		}
	})();
	
	
	
	
</script>
</body>
</html>