html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/内容切换.css">
</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>
css:
/* 内容隐藏 */
input[type="radio"],
.content {
display: none;
}
.wrapper {
width: 450px;
height: 300px;
background-color: #F2F4F7;
border-radius: 10px;
position: relative;
}
.wrapper .content {
position: absolute;
left: 0;
top: 50px;
}
label {
float: left;
width: 150px;
height: 50px;
color: black;
line-height: 50px;
text-align: center;
}
/* 有点击属性的内容显现 */
input:checked+label+.content {
display: block;
}
input:checked+label {
background-color: #2AC2B8;
border-radius: 10px;
}
页面效果: