选项卡切换效果（一）
2022-01-18 本文已影响0人
_踮起脚尖看世界
一、基于URL地址的锚链出发锚点定位实现选项卡切换效果
缺点：
1.容器高度固定
2.会出发窗体的重新得（页面可以滚动）
效果图：
image.png
image.png
image.png
测试代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 150px;
height: 150px;
background-color: #eee;
overflow: hidden;
}
.box .card{
width: inherit;
height: inherit;
text-align: center;
line-height: 150px;
font-size: 32px;
color: #fff;
}
.card1{
background-color: #b00;
}
.card2{
background-color: #095;
}
.card3{
background-color: #06f;
}
a{
display: inline-block;
margin: 5px;
border: 1px solid #ccc;
background-color: #eee;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="card card1" id="card1">1</div>
<div class="card card2" id="card2">2</div>
<div class="card card3" id="card3">3</div>
</div>
<a href="#card1">1</a>
<a href="#card2">2</a>
<a href="#card3">3</a>
</body>
</html>
二、基于”focus“的锚点定位实现选项卡切换效果
-
注意：一定注意input的样式设置以及隐藏，否则效果不会如期显示
效果图：
image.png
image.png
image.png
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 150px;
height: 150px;
background-color: #eee;
overflow: hidden;
}
.box .card{
width: inherit;
height: inherit;
text-align: center;
line-height: 150px;
font-size: 32px;
color: #fff;
position: relative;
}
.box .card input{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 1px;
height: 100%;
padding: 0;
margin: 0;
border: none;
}
.card1{
background-color: #b00;
}
.card2{
background-color: #095;
}
.card3{
background-color: #06f;
}
label{
display: inline-block;
margin: 5px;
border: 1px solid #ccc;
background-color: #eee;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="card card1"><input id="card1" />1</div>
<div class="card card2"><input id="card2" />2</div>
<div class="card card3"><input id="card3" />3</div>
</div>
<label for="card1">1</label>
<label for="card2">2</label>
<label for="card3">3</label>
</body>
</html>
