target伪类实现标签切换不起作用的问题
2020-02-28 本文已影响0人
小雪洁
目的是希望实现点击标签切换相应的页，原始代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动端视图切换</title>
</head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
main{
flex:1; /* flex:1应用在弹性元素上，main会自动撑开剩余空间 相当于flex-grow:1;flex-shrink:1;flex-basis:0; */
position: relative;
}
nav{
height: 10vh;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: steelblue;
}
nav a{
font-size: 3em;
text-transform: uppercase;
color: white;
opacity: .8;
flex:1;
text-decoration:none;
text-align: center;
}
nav a:nth-child(2){
border-left: solid #FFEFD5 3px;
border-right: solid #FFEFD5 3px;
}
main>div{
position: absolute;
top:0;
bottom: 0;
width: 100%;
height: 100%;
background: #FFFFFF;
font-size: 3em;
}
/* 问题在这里 */
main>div:nth-child(1):target{
background: #009f40;
}
main>div:nth-child(2):target{
background: #DCAE3F;
}
main>div:nth-child(3):target{
background: #93D1FF;
}
</style>
<body>
<main>
<div id="home">home</div>
<div id="video">video</div>
<div id="live">live</div>
</main>
<nav>
<a href="#home">Home</a>
<a href="#video">Video</a>
<a href="#live">Live</a>
</nav>
</body>
</html>
- 问题： 实际上无论我怎么切换都只显示了live页；
- 解决办法： 给伪类中的样式加上同样的z-index值；如下：
main>div:nth-child(1):target{
background: #009f40;
z-index: 1;
}
main>div:nth-child(2):target{
background: #DCAE3F;
z-index: 1;
}
main>div:nth-child(3):target{
background: #93D1FF;
z-index: 1;
}
- 问题解决，可以实现点击切换页
