jquery的學習筆記，每天要努力，基礎基礎

時間 2019-11-11

原文原文鏈接

<html>
<head>
	
	<script type='text/javascript' src='jquery-1.7.1.min.js'></script> 
	<title>原生js的tab標籤</title>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	ul{
		list-style-type: none;
	}
	body{
		margin: 50px;
	}

	#ul{
		height: 30px;
		margin-bottom: 10px;

	}
	#ul li{
		height: 30px;
		line-height: 30px;
		padding: 0 15px;
		border: 1px solid #abcdef;
		float: left;
		margin-right: 3px;
		cursor: pointer;
	}
	#ul li.current{
		background: #abcdef;
	}
	#content div{
		width: 300px;
		height: 200px;
		border: 1px solid #abcdef;
		display: none;
	}
	#content div.show{
		display: block;
	}

	</style>
</head>
<body>
	<ul id="ul">
		<li class="current">php</li>
		<li>ruby</li>
		<li>python</li>
	</ul>	

	<div id="content">
	<div class="show">php.........介紹</div>
	<div>ruby.........介紹</div>
	<div>python.........介紹</div>
	</div>
	<script>
	//原生js實現方法

	// var ul=document.getElementById('ul');
	// var li=ul.getElementsByTagName('li');
	// var content=document.getElementById('content');
	// var div=content.getElementsByTagName('div');
	// for (var i =0; i< li.length;  i++ ) {
	// 	li[i].index=i;
	// 	//alter(li[i].index);
	// 	//document.write(li[i].index);
	//  	 li[i].onclick=function(){
	//   	for (var i =0;i< li.length ; i++) {
	//   		li[i].className='';
	//   		div[i].style.display='none';
	//   	};
	//   	 this.className='current';
	//   	div[this.index].style.display='block';
	//   	//document.write(this.index);
	//   };
 //  };



 // jquery 實現方法

$('#ul li').click(function(){
	
	$(this).addClass('current').siblings().removeClass('current');
	$('#content>div').eq($(this).index()).show().siblings().hide();

})


//選擇器的優化
//1.優先使用id選擇器  2在class選擇器前面添加標籤名 $(p.a) 3採用find 而不使用上下文查找 4鏈式操做要更快
	</script>


</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。