0

一度にどの div を画面に表示するかを制御できるシステムをセットアップしようとしています。2 つの 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 を設定する必要があります。

すなわち

<div class="page1" id="page1">
    </h1>page 1</h1>
</div>
于 2013-05-29T20:45:45.687 に答える
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 に答える
1 
#page1:target,#page2:target{
   transform:translateX(0);
}

ここに jsfiddle があります: http://jsfiddle.net/FjeaE/

于 2013-05-30T20:31:35.270 に答える