巧用radio实现纯css选项卡完美切换实例

实例一

效果图

    
    
    css">
        *{margin:0;padding:0;}
        .test-box{width: 50%;margin: 10px auto 0;padding-top: 25px;position: relative;}
        .test-box>.test-tab{width:100%;}
        .test-box .test-label{background-color: #eee;display: inline-block;width: 25%;text-align: center;font-size: 16px;line-height: 24px;box-sizing: border-box;}
        .test-label{position: absolute;top: 0;border:solid #ccc; border- 0px 1px 1px;}
        .test-tab:nth-child(1) .test-label{left: 0;}
        .test-tab:nth-child(2) .test-label{left: 25%;}
        .test-tab:nth-child(3) .test-label{left: 50%;}
        .test-tab:last-child .test-label{border-right-}
        .test-box .content{background-color: #fff;height: 20px;display: none;border:1px solid #ccc;}
        .test-box input.test-radio{display: none;}
        .test-box input:checked~.test-label{background-color: #fff;border-bottom: 1px solid #fff;}
        .test-box input:checked~.content{display: block;}
    


    

        

            
            选项卡1
            
asdasdsad1
        
        

            
            选项卡2
            
asdasdsad2
        
        

            
            选项卡3
            
asdasdsad3
        
    

实例二 纯CSS实现漂亮tab选项卡切换特效

*{margin:0; padding:0;}
body{font-size: 14px; line-height: 2;}
li{list-style: none;}
a{color:#666; text-decoration: none;}
a:hover{color:#f00;}
.sidebar{width:80%; margin: 0 auto;}
.inline-ul {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.inline-ul ul li{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
display: inline-block;
*display:inline;
*zoom:1;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.inline-ul{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
.widget-title {
font-size: 13px;
font-weight: normal;
color: #888888;
padding: 20px 20px 0px;
}
.widget-tab .widget-title{font-size: 0;}
.widget-tab .widget-box{margin:0 20px 20px;background:#F7F7F7}
.widget-tab .widget-title ul li{margin-left:0;width:30%;text-align:center;margin-right:1.3%;padding:8px 1%;}
.widget-tab .widget-title ul li:hover{background:#F7F7F7}
.widget-tab .widget-title label{cursor:pointer;display:block; font-size: 14px;}
.widget-tab .widget-title ul li.active{background:#F7F7F7}
.widget-tab input{display:none}
.widget-tab .widget-box ul{display:none}
#new:checked ~ .widget-title .new,#hot:checked ~ .widget-title .hot,#random:checked ~ .widget-title .random{background:#F7F7F7}
#new:checked ~ .widget-box .new-list,#hot:checked ~ .widget-box .hot-list,#random:checked ~ .widget-box .random-list{display:block}
.widget-box ul li a{padding-left: 20px;}











最新博文


热评博文


随机博文






WordPress主题教程#4：热门点击文章”的固定链接">原创WordPress主题教程#4：热门点击文章


原创WordPress主题教程#3：精选推荐文章


原创WordPress主题教程#2：置顶推荐文章


原创WordPress主题教程#1：最近修改文章




javascript.html" title="我是如何学习JavaScript">我是如何学习JavaScript


搜索引擎优化（SEO）">浅谈现代化搜索引擎优化（SEO）


10个优秀的jQuery Mobile主题


javascript学习15：创建对象


全面理解面向对象的 JavaScript


移动端触摸滑动插件swipe.js


幻灯片">纯CSS幻灯片


win7安装不了nodejs及解决方法




如何在PS上使用Font Awesome字体


原创WordPress主题教程#1：最近修改文章


bootstrap学习和使用的经验总结


selection.html" title="使用css3改变选中文本的颜色" target="_blank">使用css3改变选中文本的颜色


js15-5:javascript继承


4.20-6.11,忙碌面试，思考前途


GRUNT:任务运行管理器


sublime text2打开文件为dump格式