jq 编写选项卡 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#div1 div{
			width:200px;
			height:200px;
			border:1px solid red;
			display: none;
		}
		
		.active{
			background:red;
		}
	</style>
	<script src="jquery-2.2.1.min.js"></script>
	<script>
		// window.onload = function(){
		// 	var oDiv = document.getElementById("div1");
		// 	var oInp = oDiv.getElementsByTagName("input");
		// 	var aDiv = oDiv.getElementsByTagName("div");

		// 	for(var i = 0 ; i < oInp.length;i++)
		// 	{
		// 		oInp[i].index = i;
		// 		oInp[i].onclick = function(){
		// 			for(var j = 0 ; j< oInp.length;j++)
		// 			{
		// 				aDiv[j].style.display = "none";
		// 			}
		// 			aDiv[this.index].style.display = "block";
		// 		}
		// 	}
		// }
	$(function(){
		$("#div1 > input").click(function(){
			$("#div1 > input").attr("class","");
			$("#div1 > div").css("display","");

			$(this).attr("class","active");
			$("#div1 > div").eq($(this).index()).css("display","block");

		})
	})
		
	</script>
</head>
<body>
	<div id="div1">
		<input class="active" type="button" value="1">
		<input type="button" value="2">
		<input type="button" value="3">

		<div style="display:block">11111111</div>
		<div>22222222</div>
		<div>3333333</div>
	</div>
</body>
</html>

　　

posted @ 2016-03-13 13:53  mingjixiaohui  阅读(203)  评论(0)    收藏  举报