js 实现切换Tabs

一、HTML

	
		
		
		
		
		
		
		
	
	
	


		
（3）切换Tabs
			

				

					
老子
					
庄子
					
孟子
					
孔子
				
				

					
					

						老子，姓李名耳，字聃，一字或曰谥伯阳。春秋末期人，生卒年不详（胡适曾推测老子生于周灵王初年，当公元前570年 [1]  ），出生于周朝春秋时期陈国苦县（苦县，古县名，史学界普遍认为在今河南省鹿邑县） [2-3]  。中国古代思想家、哲学家、文学家和史学家，道家学派创始人和主要代表人物。
					
					

						老子被唐朝帝王追认为李姓始祖，乃世界文化名人，世界百位历史名人之一，今存世有《道德经》（又称《老子》），其作品的核心精华是朴素的辩证法，主张无为而治。
					
				
				

					
					

						庄子，姓庄， [1]  名周，字子休（亦说子沐），宋国蒙人， [2-21]  先祖是宋国君主宋戴公。 [1]  他是东周战国中期著名的思想家、哲学家和文学家。创立了华夏重要的哲学学派庄学，是继老子之后，战国时期道家学派的代表人物，是道家学派的主要代表人物之一。
					
					

						庄周因崇尚自由而不应楚威王之聘，生平只做过宋国地方的漆园吏。史称“漆园傲吏”，被誉为地方官吏之楷模。庄子最早提出“内圣外王”思想对儒家影响深远，庄子洞悉易理，深刻指出“《易》以道阴阳”；庄子“三籁”思想与《易经》三才之道相合。他的代表作品为《庄子》，其中的名篇有《逍遥游》、《齐物论》等。与老子齐名，被称为老庄。
					
				
				

					
					

						孟子(约前372年-前289年)，姬姓，孟氏，名轲，字号不详（子舆、子居等字表皆出自伪书，或后人杜撰），战国时期邹国（今山东邹城市）人。伟大的思想家、教育家，儒家学派的代表人物，与孔子并称“孔孟”。
					
					

						韩愈《原道》将孟子列为先秦儒家继承孔子“道统”的人物，元朝追封孟子为“亚圣公·树宸”，尊称为“亚圣”，《孟子》一书，属语录体散文集，是孟子的言论汇编，由孟子及其弟子共同编写完成，倡导“以仁为本”。代表作有《鱼我所欲也》《得道多助，失道寡助》和《生于忧患，死于安乐》，《寡人之于国也》编入中学语文教科书中。
					
				
				

					
					

					孔子（公元前551年9月28日―公元前479年4月11日） [1-2]  ，子姓， [3]  孔氏，名丘，字仲尼 [4]  ，春秋末期鲁国陬邑（今山东曲阜）人，祖籍宋国栗邑（今河南夏邑） [5]  ，中国古代思想家、教育家，儒家学派创始人。他开创了私人讲学的风气，倡导仁、义、礼、智、信。 [6] 
					
					

					孔子曾带领部分弟子周游列国前后达十三年，晚年修订六经即《诗》《书》《礼》《乐》《易》《春秋》。相传孔子曾问礼于老子，有弟子三千，其中贤人七十二。孔子去世后，其弟子及其再传弟子把孔子及其弟子的言行语录和思想记录下来，整理编成儒家经典《论语》。
					
				
			
		

	

二、CSS

/*

	切换Tabs:

 */
 body{
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0;
}
 a{
	display: block;
	background: #d9d9d9;
	width: 150px;
	font-size: 20px;
	line-height: 30px;
	border: 1px solid #b9b9b9;
	text-align: center;
	text-indent: 0;
	text-decoration: none;
	color: #404040;
}
a:hover{
	color: #000000;
	background: #a9a9a9;
}
.tabs{
	font-size: 15px;
	text-indent: 30px;
}
.tabs div{
	border: 1px solid #b9b9b9;
	width: 606px;
	min-height: 450px;
	margin:0 auto;
	font-size: 18px;
}
.tabs img{
	width:250px;
	padding: 25px;
	float: left;
}
.tabs ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.in-tabs{
	display: block;
}
.not-in-tabs{
	display: none;
}

三、js

$(document).ready(function(){
	load3()
})
function load3(){
	//实现切换tabs
	$(".tabs>ul li").mouseenter(function(){
		var id = $(this).attr("id").replace(/[l]/g, "t")
		$(".in-tabs").toggleClass("in-tabs not-in-tabs")
		$("#" + id).toggleClass("in-tabs not-in-tabs")
	})
	$(".tabs>ul li").mouseleave(function(){
		$(".in-tabs").toggleClass("in-tabs not-in-tabs")
		$("#t1").toggleClass("in-tabs not-in-tabs")
	})
}