いろいろやってみたのですが、上手くいかず、救いを求めてココにやってきました。。。すみません。。。
<style>
#wrapper{
display:block;
margin:0 auto;
overflow:hidden;
background:rgba(68,136,79,1);
width:700px;
height:1000px;
}
#aaa{
display:block;
position:relative;
right:-300px;
float:right;
background:rgba(128,255,0,1);
width:300px;
height:300px;
z-index:1;
}
#bbb{
display:block;
position:relative;
left:-300px;
background:rgba(0,255,255,1);
width:300px;
height:300px;
z-index:1;
}
#ccc{
display:block;
position:relative;
right:-300px;
float:right;
background:rgba(204,153,153,1);
width:300px;
height:300px;
z-index:1;
}
#ddd{
display:block;
position:relative;
left:-300px;
background:rgba(255,255,153,1);
width:300px;
height:300px;
z-index:1;
}
#aaa-btn{
display:block;
position:relative;
top:-550px;
right:50px;
float:right;
background:rgba(128,255,190,1);
width:200px;
height:50px;
}
#bbb-btn{
display:block;
position:relative;
top:-600px;
background:rgba(0,255,190,1);
width:200px;
height:200px;
}
#ccc-btn{
display:block;
position:relative;
top:-550px;
right:50px;
float:right;
background:rgba(204,153,190,1);
width:200px;
height:50px;
}
#ddd-btn{
display:block;
position:relative;
top:-500px;
background:rgba(255,255,190,1);
width:200px;
height:200px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="aaa">aaa</div>
<div id="bbb">bbb</div>
<div id="ccc">ccc</div>
<div id="ddd">ddd</div>
<div id="aaa-btn">go to aaa</div>
<div id="bbb-btn">go to bbb</div>
<div id="ccc-btn">go to ccc</div>
<div id="ddd-btn">go to ddd</div>
</div>
</body>
css はちょっと違います。。
すみません。
まずは状況から説明させていただきます。
モニターの可視領域を作り、その中にボタンを4つ作りました。
btnA B C D という風です。
それから、モニターの不可視領域にコンテンツABCDを作りました。
イラストαの状況です
次にそれぞれのbtnにプログラムしたいです。
・btnAをクリックしたら、不可視領域にあるAが左から右へスライドしてきて、可視領域の中央に配置される。
・そのとき、すべてのbtnA B C Dはクリック不可。
・Aが元の不可視領域に戻るには「Aそのもの」をクリックする。
・Aが元に戻って、また、btnA B C Dはクリック可能になる。
イラストβの状況です。
また、btnA C は「左から右へ」、btnB Dは「右から左へ」動かしたいです。
このケースでif文を考えるとき、如何にしたら良いのでしょうか?
教えてください。
お願いいたします