0

我正在尝试建立一个系统，我可以控制一次在屏幕上显示哪个 div。我有两个 div，都应该使用按钮显示；“第 1 页”和“第 2 页”。

我首先给每个 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>
4

4 回答 4

2

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

IE

<div class="page1" id="page1">
    </h1>page 1</h1>
</div>
于 2013-05-29T20:45:45.687 回答
1 
#page1:target,#page2:target{
   transform:translateX(0);
}

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

于 2013-05-30T20:31:35.270 回答
1

如果这是您正在使用的实际代码，那么您的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 在 Firefox 中适用于我。

于 2013-05-30T19:25:29.053 回答
1

您的目标正在使用该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%);
}
于 2013-05-30T19:36:11.387 回答