纯CSS实现table切换；lable+radio组合，仅供参考思路

最新推荐文章于 2022-04-02 00:05:17 发布

Mr.WangCsdn

最新推荐文章于 2022-04-02 00:05:17 发布

阅读量915

点赞数

分类专栏：前端，开发文章标签：免费发布

本文链接：https://blog.csdn.net/qq_36583918/article/details/78722434

版权

前端，开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>纯css-label+radio组成tab切换</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.main{
position: relative;
width: 1200px;
height: 800px;
/* border: 1px solid red;*/
margin: 0 auto;
}
.photo{
position: absolute;
right: 0px;
left: -480px;
}
label{
cursor: pointer;
display: inline-block;
opacity: 0.5;
height: 100px;
width: 230px;
margin-top: 100px;
background-color: transparent;
border-radius: 4px;
text-align: center;
border: 1px solid black;
line-height: 100px;
}
label:hover{
opacity: 1;
}
input{
display:none;
}
ul{
list-style: none;
padding: 0px;
height: 320px;
overflow: hidden;
margin-left: 480px;
position: relative;
}
.set_page1:checked + ~.photo ul li:nth-child(1){
position: absolute;
top: 0px;
z-index: 25;
width: 1180px;
}
.set_page2:checked ~.photo ul li:nth-child(2){
position: absolute;
top: 0;
z-index: 22;
width: 1180px;
}
.set_page3:checked ~.photo ul li:nth-child(3){
position: absolute;
top: 0;
z-index: 23;
width: 1180px;
}
.set_page4:checked ~.photo ul li:nth-child(4){
position: absolute;
top: 0;
z-index: 24;
width: 1180px;
}

.set_page5:checked ~.photo ul li:nth-child(5){
position: absolute;
top: 0;
width: 1180px;
}
.texts{
width:1180px;
height: 318px;
border: 1px solid black;
border-radius: 4px;
overflow: hidden;
overflow-y: inherit;
}
</style>
</head>
<body>
<div class="main">
<input type="radio" name="p" id="name1" class="set_page1"/>
<input type="radio" name="p" id="name2" class="set_page2"/>
<input type="radio" name="p" id="name3" class="set_page3"/>
<input type="radio" name="p" id="name4" class="set_page4"/>
<input type="radio" name="p" id="name5" class="set_page5"/>


<label for="name1" class="c1">第一页</label>
<label for="name2" class="c2">第二页</label>
<label for="name3" class="c3">第三页</label>
<label for="name4" class="c4">第四页</label>
<label for="name5" class="c5">第五页</label>
<div class="photo">
<ul>
<li class="li1">

<div class="texts">内容</div>
</li>
<li>

<div class="texts">内容1</div>
</li>
<li>

<div class="texts">内容2</div>
</li>
<li>

<div class="texts">内容3</div>
</li>
<li>

<div class="texts">内容4</div>
</li>
</ul>
</div>
</div>
</body>
</html>