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;
}

效果我正在寻找红色块是一个按钮，文本窗口滑入和滑出的位置

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/

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

1 个答案: