摘要：
接下来，根据需要设置ul的长度。这里，首先制作三个切换窗口，因此ul的宽度被设置为容器宽度的300%，li是每次切换时显示的子元素，宽度被设置为所显示容器的100%。所有多余的部分都被隐藏起来，这样我们就可以通过修改ul的margin-left属性的值来实现简单的切换效果。接下来写三个单选框进行切换，因为要实现点击后切换的效果。此时将lable指向对应输入标签的id，使用伪class: checked实现选择切换的效果。
使用css制作简单的点击切换效果，参考了以下教程：css实现的轮播和点击切换(无js版)
首先先制作一个容器，用来容纳所显示的内容：
接下来，根据需要设置ul的长度，这里先制作三个切换窗口，因此将ul的宽度设置为容器宽度的300%，li即为每次切换时显示的子元素，宽度设置为显示容器的100%;
多出来的部分也被显示出来了，此时就要给显示窗口设置overflow:hidden;属性，将多出来的部分隐藏起来
多出来的部分全部被隐藏起来了，这样，我们就可以通过修改ul的margin-left属性值实现简单的切换效果。
接下来写三个单选框用于切换，因为需要实现点击之后才进行切换的效果，此时将lable指向相应的input标签的id并使用伪类:checked来实现选择切换的效果。
效果如下：
最后，再给ul标签添加transition:all 0.5s;属性，设置0.5秒的平滑过渡 css代码：
.contain ul{transition:all 0.5s;}
这样，就可以实现页面的平滑切换了。
备注：一些步骤代码重复了，所以只放上最终的html和css。逐步分解的代码请移至原文查看
代码
html
<html></html>
<head>
<meta charset="utf-8">
<link href="./test.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="contain">
<input type="radio" name="sildeInput" value="0" id="Input1" hidden>
<label class="label1" for="Input1">1</label>
<input type="radio" name="sildeInput" value="1" id="Input2" hidden>
<label class="label2" for="Input2">2</label>
<input type="radio" name="sildeInput" value="1" id="Input3" hidden>
<label class="label3" for="Input3">3</label>
<ul>
<li class="sildeInput-1">one-点击切换</li>
<li class="sildeInput-2">two-点击切换</li>
<li class="sildeInput-3">three-点击切换</li>
</ul>
</div>
</body>
</html>css
.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
}
.contain{overflow: hidden;}
.contain ul{
margin:10px 0;
padding:0;
width: 1800px;
}
.contain li{
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.sildeInput-1{
background: #9fa8ef;
}
.sildeInput-2{
background: #ef9fb1;
}
.sildeInput-3{
background: #9fefc3;
}
.label1{
position: absolute;
bottom: 10px;
left: 0px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用于调整单选框的属性以及位置*/
.label2{
position: absolute;
bottom: 10px;
left: 30px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用于调整单选框的属性以及位置*/
.label3{
position: absolute;
bottom: 10px;
left: 60px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用于调整单选框的属性以及位置*/
#Input1:checked~ul{ margin-left: 0;}/*第一张点击切换*/
#Input1:checked~.label1{ background: #535353;}/*点击后改变单选框颜色*/
#Input2:checked~ul{ margin-left: -600px;}/*第二张点击切换*/
#Input2:checked~.label2{ background: #535353;}/*点击后改变单选框颜色*/
#Input3:checked~ul{ margin-left: -1200px;}/*第三张点击切换*/
#Input3:checked~.label3{ background: #535353;}/*点击后改变单选框颜色*/
.contain ul{transition:all 0.5s;}本文来源：【使用css实现点击切换效果】
由思享SEO博客编辑转载，仅用于参考学习，如有侵权请联系本站修改删除！