js 实现切换Tabs
一、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="hw5">
<meta name="author" content="le">
<title>221600219_hw5</title>
<link rel="stylesheet" type="text/css" href="./test.css" charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="./test.js" charset="utf-8"></script>
</head>
<body>
<hr />
<h1>（3）切换Tabs</h1>
<div class="tabs">
<ul>
<li id="l1"><a href="#">老子</a></li>
<li id="l2"><a href="#">庄子</a></li>
<li id="l3"><a href="#">孟子</a></li>
<li id="l4"><a href="#">孔子</a></li>
</ul>
<div id="t1" class="in-tabs">
<img src="./test1.jpg">
<p>
老子，姓李名耳，字聃，一字或曰谥伯阳。春秋末期人，生卒年不详（胡适曾推测老子生于周灵王初年，当公元前570年 [1] ），出生于周朝春秋时期陈国苦县（苦县，古县名，史学界普遍认为在今河南省鹿邑县） [2-3] 。中国古代思想家、哲学家、文学家和史学家，道家学派创始人和主要代表人物。
</p>
<p>
老子被唐朝帝王追认为李姓始祖，乃世界文化名人，世界百位历史名人之一，今存世有《道德经》（又称《老子》），其作品的核心精华是朴素的辩证法，主张无为而治。
</p>
</div>
<div id="t2" class="not-in-tabs">
<img src="./test2.jpg">
<p>
庄子，姓庄， [1] 名周，字子休（亦说子沐），宋国蒙人， [2-21] 先祖是宋国君主宋戴公。 [1] 他是东周战国中期著名的思想家、哲学家和文学家。创立了华夏重要的哲学学派庄学，是继老子之后，战国时期道家学派的代表人物，是道家学派的主要代表人物之一。
</p>
<p>
庄周因崇尚自由而不应楚威王之聘，生平只做过宋国地方的漆园吏。史称“漆园傲吏”，被誉为地方官吏之楷模。庄子最早提出“内圣外王”思想对儒家影响深远，庄子洞悉易理，深刻指出“《易》以道阴阳”；庄子“三籁”思想与《易经》三才之道相合。他的代表作品为《庄子》，其中的名篇有《逍遥游》、《齐物论》等。与老子齐名，被称为老庄。
</p>
</div>
<div id="t3" class="not-in-tabs">
<img src="./test3.jpg">
<p>
孟子(约前372年-前289年)，姬姓，孟氏，名轲，字号不详（子舆、子居等字表皆出自伪书，或后人杜撰），战国时期邹国（今山东邹城市）人。伟大的思想家、教育家，儒家学派的代表人物，与孔子并称“孔孟”。
</p>
<p>
韩愈《原道》将孟子列为先秦儒家继承孔子“道统”的人物，元朝追封孟子为“亚圣公·树宸”，尊称为“亚圣”，《孟子》一书，属语录体散文集，是孟子的言论汇编，由孟子及其弟子共同编写完成，倡导“以仁为本”。代表作有《鱼我所欲也》《得道多助，失道寡助》和《生于忧患，死于安乐》，《寡人之于国也》编入中学语文教科书中。
</p>
</div>
<div id="t4" class="not-in-tabs">
<img src="./test4.jpg">
<p>
孔子（公元前551年9月28日―公元前479年4月11日） [1-2] ，子姓， [3] 孔氏，名丘，字仲尼 [4] ，春秋末期鲁国陬邑（今山东曲阜）人，祖籍宋国栗邑（今河南夏邑） [5] ，中国古代思想家、教育家，儒家学派创始人。他开创了私人讲学的风气，倡导仁、义、礼、智、信。 [6]
</p>
<p>
孔子曾带领部分弟子周游列国前后达十三年，晚年修订六经即《诗》《书》《礼》《乐》《易》《春秋》。相传孔子曾问礼于老子，有弟子三千，其中贤人七十二。孔子去世后，其弟子及其再传弟子把孔子及其弟子的言行语录和思想记录下来，整理编成儒家经典《论语》。
</p>
</div>
</div>
<hr />
</body>
</html>
二、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")
})
}
版权声明
本文章由作者“衡于墨”创作，转载请注明出处，未经允许禁止用于商业用途
发布时间：2018年10月18日 15:02:34
备案号：
闽ICP备19015193号-1
闽ICP备19015193号-1
关闭特效
评论区#
还没有评论哦，期待您的评论！
引用发言