jQuery学习（二.2）-CSDN博客

本文链接：https://blog.csdn.net/mj404/article/details/42342649
依旧是例子实践，实现tab页面的效果，
先用原生js实现，然后jquery实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learn_jqueryDemo1</title>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
	body {
		margin:130px;
	}

	ul {
		list-style-type: none;
		margin-bottom: 10px;
	}

	#ul-tab li {
		height: 30px;
		line-height: 30px;
		padding: 0 32.7px;
		border: 1px solid #abcdef;
		float: left;
		margin-right: 3px;
		cursor: pointer;
	} 
	#ul-tab li.current {
		background: green;
	}

	#content div {
		width: 500px;
		height: 400px;
		border: 1px solid pink;
		display: none;
	}

	#content div.show {
		display: block;
	}
	</style>
</head>
<body>
	<!-- (ul#ul-tab>li*3)+(#content>div*3) -->
	<ul id="ul-tab">
		<li class="current">Java</li>
		<li>Python</li>
		<li>Ruby</li>
		<li>JavaScript_Jquery</li>
	</ul>
	<div id="content">
		<div class="show">
			Java是由Sun Microsystems公司推出的Java面向对象程序设计语言（以下简称Java语言）和Java平台的总称。由James Gosling和同事们共同研发，并在1995年正式推出。Java最初被称为Oak，是1991年为消费类电子产品的嵌入式芯片而设计的。1995年更名为Java，并重新设计用于开发Internet应用程序。用Java实现的HotJava浏览器（支持Java applet）显示了Java的魅力：跨平台、动态Web、Internet计算。从此，Java被广泛接受并推动了Web的迅速发展，常用的浏览器均支持Javaapplet。另一方面，Java技术也不断更新。Java自面世后就非常流行，发展迅速，对C++语言形成有力冲击。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。2010年Oracle公司收购Sun Microsystems。
		</div>
		<div>
			Python（英语发音：/ˈpaɪθən/）, 是一种面向对象、解释型计算机程序设计语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python语法简洁而清晰，具有丰富和强大的类库。它常被昵称为胶水语言，它能够把用其他语言制作的各种模块（尤其是C/C++）很轻松地联结在一起。常见的一种应用情形是，使用Python快速生成程序的原型（有时甚至是程序的最终界面），然后对其中有特别要求的部分，用更合适的语言改写，比如3D游戏中的图形渲染模块，性能要求特别高，就可以用C++重写。
		</div>
		<div>
			Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言，在20世纪90年代由日本人松本行弘（まつもとゆきひろ/Yukihiro Matsumoto）开发，遵守GPL协议和Ruby License。它的灵感与特性来自于 Perl、Smalltalk、Eiffel、Ada以及 Lisp 语言。由 Ruby 语言本身还发展出了JRuby（Java平台）、IronRuby（.NET平台）等其他平台的 Ruby 语言替代品。Ruby的作者于1993年2月24日开始编写Ruby，直至1995年12月才正式公开发布于fj（新闻组）。因为Perl发音与6月诞生石pearl（珍珠）相同，因此Ruby以7月诞生石ruby（红宝石）命名。
		</div>
		<div>
			JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。Node.jsJquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
		</div>
	</div>




<script type="text/javascript">
	/*JS*/
	/*var ulTab = document.getElementById('ul-tab');
	var liTab = ulTab.getElementsByTagName('li');
	var contentTab = document.getElementById('content');
	var divTab =  contentTab.getElementsByTagName('div');
	// alert(liTab.length)
	for (var i = 0; i < liTab.length; i++) {
		liTab[i].index=i;
		liTab[i].οnclick=function() {
			for (var i = 0; i < liTab.length; i++) {
				liTab[i].className="";
				divTab[i].className="";//style.display="none";
			};
			this.className="current";
			divTab[this.index].className="show"; //style.display="block";
			// alert(i)
		}
	};*/
</script>

<!-- Jquery -->
<script type="text/javascript">
	$('#ul-tab>li').click(function() {
		/*$(this).addClass('current').siblings().removeClass('current');
		$('#content>div').eq($(this).index()).show().siblings().hide();*/
	

		//huozhe 
		/*$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide()*/
	});	
</script>

</body>
</html>