html5: 锚点制作选项卡
<style>
*{margin: 0;padding: 0;}li{list-style: none;}
.warp{width: 700px; margin: 100px auto}
.warp ul{position: relative;}
.warp .tab{ height:285px; }
.warp .tab li{
float:left;
width:100px;
height:100px;
margin-left: 20px;
}
.warp .tab li:nth-child(2)
{
margin-left: 30px;
}
.warp .tab li input[type='radio']{ position:absolute; }
.warp .tab li label{
font-size:18px;
padding:14px 21px;
background-color:#8bc1de;;
position:absolute;
top:0;
}
.tab [id^='select']:checked + label{
top:-5px;
padding-top:20px;
background:#2aaf67;
}
.warp .tab li label:hover{
background-color: #9999dd;;
}
.warp .tab li .content{
position:absolute;
top:53px;
left:0;
width:700px;
padding:25px;
background: #ededed;
display:none;
}
.tab [id^='select']:checked ~[id^='content']{
display:block;
}
div :nth-child(1) p{color:#52C5FC;}
</style>
</head>
<body>
<div class="warp">
<ul class="tab">
<li>
<input type="radio" name="tabs" id="select" checked>
<label for="select">三国演义</label>
<div id="content" class="content">
<p>《三国演义》是中国古典四大名著之一,是中国第一部长篇章回体历史演义小说,全名为《三国志通俗演义》(又称《三国志演义》),作者是元末明初的著名小说家罗贯中。描写了从东汉末年到西晋初年之间近105年的历史风云,以描写战争为主,反映了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争和最终司马炎一统三国,建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化,并概括了这一时代的历史巨变,塑造了一批叱咤风云的三国英雄人物。全书可大致分为黄巾之乱、董卓之乱、群
雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的背景上,上
演了一幕幕气势磅礴的战争场面。编者罗贯中将兵法三十六计融于字
里行间,既有情节,也有兵法韬略。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select1">
<label for="select1">红楼梦</label>
<div id="content1" class="content">
<p>红楼梦是中国古代四大名著之一,写于十八世纪中叶的清乾隆时代,内容以贾、王、史、薛四大家族为背景,以贾宝玉、
林黛玉的爱情悲剧为主线,描写了封建官僚贾、王、史、薛四大家族,
特别是贾家的衰落过程,揭露了封建统治者的罪恶,说明了封建王朝必将衰落的
历史命运。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select2">
<label for="select2">西游记</label>
<div id="content3" class="content">
<p>《西游记》为明代小说家吴承恩所著。取材于《大唐西域记》和民间
传说、元杂剧。宋代《大唐三藏取经诗话》(本名《大唐三藏取经记》
)是西游记故事见于说话文字的最早雏形,其中,唐僧就是以玄奘法师为原型的。
作为中国古代第一部浪漫主义长篇神魔小说,该书深刻地描绘了当时的
社会现实,是魔幻现实主义的开创作品。先写了孙悟空出世,然后遇见了唐
僧、猪八戒和沙和尚三人,但还是主要描写了孙悟空、猪八戒、沙和尚三人保护唐僧西行取经,唐僧从投胎到取经受了九九八十一难,一路降妖伏魔,九九归一,终于到达西天见到如来佛祖,最终五圣成真。
自《西游记》问世以来在民间广为流传,各式各样的版本层出不穷,明
代刊本有六种,清代刊本、抄本也有七种,典籍所记已佚版本十三种。鸦
片战争以后,中国古典文学作品大量被译为西文,西渐欧美,已有英、法、德
、意、西、手语、世(世界语)、俄、捷、罗、波、日、朝、越等文种。并发
表了不少研究论文和专著,对这部小说作出了极高的评价。被尊为中国古典
四大名著之一。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select3">
<label for="select3">水浒传</label>
<div id="content4" class="content">
<p>[1]《水浒传》,是中国四大名著之一,全书描写北宋末年以宋江为首的108位好汉在梁山起义,以及聚义之后接受招安、四处征战的故事。《水浒传》也是汉语文学中最具备史诗特征的作品之一。 是中国历史上最早用白话文写成的章回小说之一。版本众多,流传极广,脍炙人口,对中国乃至东亚的叙事文学都有极其深远的影响。《水浒传》是一部以描写古代农民起义为题材的长篇小说。它形象地描绘了农民起义从发生、发展
直至失败的全过程,深刻揭示了起义的社会根源,满
腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想,也具体揭示
了起义失败的内在历史原因。[2]</p>
</div>
</li>
</ul>
</div>
</body>
</html>
效果图::