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轉換使用：目標

回答

相關問題