CSS转换使用：目标

我想设置一个系统，我可以控制哪一个div在屏幕上一次显示。我有两个div，两者都应该使用按钮显示; “page1”和“page2”。CSS转换使用：目标

我开始给每个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>

来源

2013-05-29 Chris

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

这里有一个的jsfiddle：http://jsfiddle.net/FjeaE/

来源

2013-05-30 20:31:35

谢谢！所有的答案都是完全有效的，除了......类和id之间的混淆完全是我的错误，当copoy和粘贴到这个线程的日期代码。我的问题是通过使用这个CSS解决的。 @Robert McKee - 我可以问为什么这个工作？我不明白为什么这是必需的。我想：目标会工作得很好。 – Chris

你的目标<div>的需要有自己的ID设置，使它们实际上是由哈希链接的目标。

即

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

来源

2013-05-29 20:45:45 JasonC

我必须道歉。由于粗心的撤消和复制粘贴，我发布的HTML有点过时了。 HTML实际上使用ID而不是类。我已更新该帖子以反映这一点。任何人都可以看到其他原因吗？ – Chris

如果这是您正在使用实际的代码，那么你的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-30 19:25:29 nullability

你的目标是利用id属性，但你的CSS针对类属性：

#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-30 19:36:11 zeantsoi

CSS转换使用：目标

回答

相关问题