做法:
a標籤+target僞類,a標籤的id綁定頁面元素的id,初始元素在屏幕外,
使用target僞類當點擊超鏈接時添加移動樣式,並會顯示對應target元素的內容
代碼示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./index.css">
<style>
.box{
/* width: 400px;
height: 400px;
border: solid 1px blueviolet; */
flex:1;
position:relative;
}
.box>div{
position: absolute;
left: 0;
top:0;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
transform: translateY(-100%);
transition: 1s;
/* background-color: black; */
}
.box>div:nth-child(1){
}
.box>div:nth-child(2){
}
.box>div:nth-child(3){
}
body{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.nav{
height: 8vh;
background-color: #8A2BE2;
display: flex;
justify-content: space-evenly;
z-index: 99;
}
.nav a{
text-transform: uppercase;
text-decoration: none;
}
.nav a:nth-child(2)
{
border-right: solid 1px red;
border-left: solid 1px red;
padding: 0 200px;
}
.box>div:nth-child(1):target{
background-color: orange;
transform: translateY(0);
}
.box>div:nth-child(2):target{
background-color: green;
transform: translateY(0);
}
.box>div:nth-child(3):target{
background-color: darkred;
transform: translateY(0);
}
</style>
</head>
<body class='me'>
<div class='box'>
<div id='d1' class='d1'>1</div>
<div id='d2' class='d2'>2</div>
<div id='d3' class='d3'>3</div>
</div>
<div class='nav'>
<a href="#d1">1</a>
<a href="#d2">2</a>
<a href="#d3">3</a>
</div>
</body>
</html>
效果圖:
