html - 使用多个单选按钮切换滑出窗口

Question

尝试可能使用单选按钮在页面左侧下方创建多个按钮，以影响右侧的滑出窗口。

input[type=checkbox]
{
position: absolute;
top: -9999px;
left: -9999px;
}

label
{
background:red;
background-size:100%;
width:100px;
height:100px;
position:relative;
top:-50px;
left:10px;
display: inline-block;
margin: 60px 0 10px 0;
cursor: pointer;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}


div1
{
position:absolute;
top:0px;
left:100%;
background: white;
width: 35%;
height: 100%;
line-height: 20px;
text-align:left;
color: black;
margin:20px 20px 20px 20px:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
Z-index:1;
overflow:scroll;
}


input[type=checkbox]:checked ~ div1 
{
background:grey;
position:absolute;
top:0px;
left:65%;
overflow:scroll;
}


label:hover
{
opacity:0.5;
}

效果我在找哪里红色 block 是按钮，文本窗口滑入滑出

http://jsfiddle.net/bKaxg/215/

诀窍是在切换下一个窗口之前，我需要其他按钮将最后一个滑出窗口返回到屏幕之外。

与此类似但不需要水平制表符http://css-tricks.com/functional-css-tabs-revisited/或者内容区域的位置有限。

欢迎其他解决方案，只要它们是基于 CSS/HTML 的。

谢谢

Answer 1

希望我能正确理解您的问题。我用 2 个单选按钮做了一个例子。诀窍是为当前关闭的 div 设置一个过渡延迟。我会用注释解释我的代码。

HTML

<input type="radio" name="slider" id="one">
<input type="radio" name="slider" id="two">

<label for="one">slider one</label>
<label for="two">slider two</label>

<div class="slider slider_one">one</div>
<div class="slider slider_two">two</div>

CSS

html,body {
    height:100%;
    width:100%;
    overflow:hidden; /* you can change this, just for the example */
}

input {
    position:absolute; /* move the checkbox from the field since we can't style them */
    left:-9999px;
    top:-9999px;
}

label {
    -webkit-appearance:none; /* use labels instead, linked to the checkboxes */
    -moz-appearance:none;
    appearance:none;
    width:50px;
    height:50px;
    background-color:#ccc;
}

.slider {
    position:absolute; /* we move the content sliders from the field */
    width:400px;
    height:100%;
    right:-400px;
    background-color:#ccc;
    -webkit-transition: all 1s; /* transition of 1 second */
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#one:not(:checked) ~ .slider_two, #two:not(:checked) ~ .slider_one  {
    -webkit-transition-delay:1s; /* this is where the magic happens, the currently closed div get's a 1 second delay, the same duration as the animation. This will make sure that the the div will close first and that the second div will open after that. */
    -moz-transition-delay:1s;
    transition-delay:1s;
}

#one:checked ~ .slider_one,
#two:checked ~ .slider_two {
    right:0; /* on click on a label, radio button get's checked and we move the slider out */
}

这个解决方案有一个缺陷!第一个转换也会有 1 秒的延迟，因此看起来第一个动画有延迟。

JSFIDDLE

http://jsfiddle.net/kWQ3c/1/

希望对您有所帮助!

更新:

http://jsfiddle.net/kWQ3c/2/