<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input[type="radio"],.content{
display: none;
}
.wrapper{
width: 450px;
height: 300px;
background-color: lightgray;
position: relative;
}
.wrapper .content{
position: absolute;
left:0;
top:50px;
}
label{
float: left;
width:150px;
height: 50px;
color:white;
line-height: 50px;
text-align: center;
}
/* 被选中的input 最近的label兄弟 和.content兄弟 */
input:checked+label+.content{
display: block;
}
/* 被选中的input 最近的label兄弟 */
input:checked+label{
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="radio" name="title" id="active1" value=""/>
<label for="active1">红楼梦</label>
<div class="content">
《红楼梦》,中国古代章回体长篇小说，又名《石头记》《金玉缘》，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹（作者尚有争议）所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人们的人生百态，展现了正邪两赋有情人的人...
</div>
<input type="radio" name="title" id="active2" value="" checked/>
<label for="active2">水浒传</label>
<div class="content">
《水浒传》是由中央电视台与中国电视剧制作中心联合出品的43集电视连续剧,根据明代施耐庵的同名小说改编。由张绍林执导，杨争光 、冉平改编，李雪健、周野芒、臧金生、丁海峰...
</div>
<input type="radio" name="title" id="active3" value=""/>
<label for="active3">三国演义</label>
<div class="content">
《三国演义》是中日两国合作制作的动画片,已于2009年在中国上映。该动画片是根据中国古代名著《三国演义》改编，由北京辉煌动画、央视动画与日本未来行星株式会社联手打造的高...
</div>
</div>
</body>
</html>
扫一扫
1284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
