原生js、jq切换选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jq</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#div1 div{
	width: 200px;
	height: 200px;
	border:1px solid #000;
	display: none;
}
.active{
	background: red;
	color: #fff;
}
</style>
</head>
<script type="text/javascript">
//js选项卡
	/*window.onload = function(){
		var oDiv = document.getElementById('div1');
		var aInput = oDiv.getElementsByTagName('input');
		var aCon = oDiv.getElementsByTagName('div');

		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 = '';
					aCon[i].style.display = 'none';
				}
				this.className = 'active';
				aCon[this.index].style.display = 'block';
			}
		}
	};*/
	
// jq 选项卡
// 	$(function(){
// 		$('#div1').find('input').click(function(){
// 			$('#div1').find('input').attr('class','');
// 			$('#div1').find('div').css('display','none');
// 			$(this).attr('class','active');
// 			$('#div1').find('div').eq($(this).index()).css('display','block') //css 换成.hide 或者 .show更好
// 		})
// 	});

$(function(){
		$('.left_goodtype li').each(function(i,v){
			$(v).click(function(){	
			var i = $(v).index();			
				$(v).addClass('active').siblings().removeClass('active');
				 $('.goods_right').css('display','none');
				$('.goods_right').eq(i).css('display','block'); //css 换成.hide 或者 .show更好
			})
		})
	});
</script>
<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">111</div>
  	<div>222</div>
  	<div>333</div>
  </div>
</body>
</html>
原生js、jq切换选项卡

猜你喜欢
