使用css制作简单的点击切换效果，参考了以下教程：

首先先制作一个容器，用来容纳所显示的内容：

HTML代码：

    
            
     
     
    
      
        
       
        
       
        
       
/li>    
      
     

CSS代码：

.contain{        position: relative;        margin:auto;        width: 600px;        height: 200px;        text-align: center;        font-family: Arial;        color: #FFF;    }

接下来，根据需要设置ul的长度，这里先制作三个切换窗口，因此将ul的宽度设置为容器宽度的300%，li即为每次切换时显示的子元素，宽度设置为显示容器的100%；

HTML代码：

     
    
      
        
       
one-点击切换
        
       
two-点击切换
        
       
three-点击切换
    
      
     

CSS代码：

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

效果如下:

可以看到，多出来的部分也被显示出来了，此时就要给显示窗口设置overflow:hidden;属性，将多出来的部分隐藏起来

CSS代码：

.contain{overflow: hidden;}

效果如下：

可以看到，多出来的部分全部被隐藏起来了，这样，我们就可以通过修改ul的margin-left属性值实现简单的切换效果。

接下来写三个单选框用于切换，因为需要实现点击之后才进行切换的效果，此时将lable指向相应的input标签的id并使用伪类:checked来实现选择切换的效果。

HTML代码：

     
    
          
      1    
          
      2    
          
      3    
      
        
       
one-点击切换
        
       
two-点击切换
        
       
three-点击切换
    
      
     

CSS代码

.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;}/*点击后改变单选框颜色*/

效果如下：

最后，再给ul标签添加transition:all 0.5s;属性，设置0.5秒的平滑过渡

css代码：

.contain ul{transition:all 0.5s;}

这样，就可以实现页面的平滑切换了。

本文作者：qq_41061352

本文发布时间：2018年02月02日

本文来自云栖社区合作伙伴 ，了解相关信息可以关注csdn.net网站。