Question

我正在尝试设置一个系统，我可以控制一次在屏幕上显示哪个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>

Answer 1

您的目标<div>需要设置其ID，以便它们实际上是哈希链接的目标。

即

<div class="page1" id="page1">
    </h1>page 1</h1>
</div>

Answer 2

如果这是您正在使用的实际代码，那么您的transform样式永远不会被应用。你的css正在使用.page1和.page2类，但你的div没有这些类。切换CSS以使用#page1和#page2，或者为他们提供适当的类。例如：

<div class="pageContain">
    <div id="page1" class="page1">
            <h1>page 1</h1>
    </div>
    <div id="page2" class="page2">
        <h1>page 2</h1>
    </div>  
</div>

通过这些更改，您提供的现有CSS适用于我。

Answer 3

您的目标正在使用id属性，但您的CSS定位了class属性：

#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%);
}

Answer 4

#page1:target,#page2:target{
   transform:translateX(0);
}

这是一个jsfiddle：http://jsfiddle.net/FjeaE/

CSS过渡使用：目标

4 个答案: