js原生选项卡功能

<style>
	.content{
		display: none;
		width:200px;
		height: 200px;
		border:1px solid #ccc;
	}
	.active{
		background-color: red;
	}
</style>

<div class="wrapper">
	<button class="active">111</button>
	<button>222</button>
	<button>333</button>
	<div class="content" style="display: block;">111哈哈哈</div>
	<div class="content">222嘿嘿嘿</div>
	<div class="content">333呵呵呵</div>
</div>

<script type="text/javascript">
	var btn = document.getElementsByTagName('button');
	var div = document.getElementsByClassName('content');
	for(var i=0;i<btn.length;i++){
		(function(n){
			btn[n].onclick = function () {
				// 让按钮变色
				for (var j = 0; j < btn.length; j++) {
					btn[j].className = "";
					div[j].style.display = "none";
				}
				this.className = "active";
				div[n].style.display = "block";
			}
		}(i))
}
</script>