我正在尝试建立一个系统，我可以在其中一次控制在屏幕上显示哪个 div。我有两个 div，都应该使用按钮显示； “page1”和“page2”。
我首先为每个 div 指定了一个绝对位置和 100% 的宽度。我使用 CSS 转换将两个 DIV 向后移动了 100%，因此它们不在屏幕上。
然后我想使用 :target 对选定的 div 进行转换。
#page1{
position:absolute;
text-align:center;
background:blue;
float:left;
width:100%;
transform:translateX(-100%);
}
#page2{
position:absolute;
text-align:center;
background:red;
float:left;
width:100%;
transform:translateX(-100%);
}
:target{
transform:translateX(0);
}
我知道当我在 CSS 中手动将转换设置为 0 时，DIV 会正确显示。发生的事情是，当我单击链接时，没有任何反应。我在这里错过了什么吗？谢谢
完整的 HTML/CSS 文件在这里:
<html>
<head>
<style>
body{
margin:0;
padding:0;
}
.controlBar{
text-align:center;
float:left;
width:100%;
background-color:green;
}
.pageContain{
float:left;
width:100%;
}
#page1{
position:absolute;
text-align:center;
background:blue;
float:left;
width:100%;
transform:translateX(-100%);
}
#page2{
position:absolute;
text-align:center;
background:red;
float:left;
width:100%;
transform:translateX(-100%);
}
:target{
transform:translateX(0);
}
</style>
</head>
<body>
<div class="controlBar">
<h1>Control Bar</h1>
<a href="#page1">Page 1</a>
<a href="#page2">Page 2</a>
</div>
<div class="pageContain">
<div id="page1">
<h1>page 1</h1>
</div>
<div id="page2">
<h1>page 2</h1>
</div>
</div>
</body>
</html>
最佳答案
你的目标 <div> s 需要设置它们的 ID，以便它们实际上是散列链接的目标。
即
<div class="page1" id="page1">
</h1>page 1</h1>
</div>
关于html - 使用 :target 的 CSS 过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16823236/