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

2016-03-02    编辑:edit02_lz     点击(
通常我们做tab选项卡切换会用js实现,不过我们也可以用纯css打造选项卡切换,而且兼容性也好,就是巧妙的应用radio。

实例一


效果图

01.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>radio选项卡切换</title>
    <style type="text/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-width:1px 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-width:1px;}
        .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;}
    </style>
</head>
<body>
    <div>
        <div>
            <input type="radio" id="radio1" name="test-radio" checked>
            <label for="radio1">选项卡1</label>
            <div><P>asdasdsad1</P></div>
        </div>
        <div>
            <input type="radio" id="radio2" name="test-radio">
            <label for="radio2">选项卡2</label>
            <div><P>asdasdsad2</P></div>
        </div>
        <div>
            <input type="radio" id="radio3" name="test-radio">
            <label for="radio3">选项卡3</label>
            <div><P>asdasdsad3</P></div>
        </div>
    </div>
</body>
</html>


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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pure css3 tab</title>
<style type="text/css">
*{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;}
</style>
</head>
<body>
<div>
<div class="widget widget-tab">
<input type="radio" name="widget-tab" id="new" checked="checked"/>
<input type="radio" name="widget-tab" id="hot"/>
<input type="radio" name="widget-tab" id="random"/>
<div class="widget-title inline-ul">
<ul>
<li>
<label for="new">最新博文</label>
</li>
<li>
<label for="hot">热评博文</label>
</li>
<li>
<label for="random">随机博文</label>
</li>
</ul>
</div>
<div>
<ul>
<li>
<a href="/wordpress-popular-view-posts.html" title="“原创WordPress主题教程#4:热门点击文章”的固定链接">原创WordPress主题教程#4:热门点击文章</a>
</li>
<li>
<a href="/wordpress-feature-posts.html" title="“原创WordPress主题教程#3:精选推荐文章”的固定链接">原创WordPress主题教程#3:精选推荐文章</a>
</li>
<li>
<a href="/wordpress-sticky-posts.html" title="“原创WordPress主题教程#2:置顶推荐文章”的固定链接">原创WordPress主题教程#2:置顶推荐文章</a>
</li>
<li>
<a href="/wordpress-recent-update-posts-2.html" title="“原创WordPress主题教程#1:最近修改文章”的固定链接">原创WordPress主题教程#1:最近修改文章</a>
</li>
</ul>
<ul>
<li>
<a href="/how-i-learn-javascript.html" title="我是如何学习JavaScript">我是如何学习JavaScript</a>
</li>
<li>
<a href="/my-seo-topic.html" title="浅谈现代化搜索引擎优化(SEO)">浅谈现代化搜索引擎优化(SEO)</a>
</li>
<li>
<a href="/10-best-free-jquery-mobile-theme.html" title="10个优秀的jQuery Mobile主题">10个优秀的jQuery Mobile主题</a>
</li>
<li>
<a href="/js-create-object.html" title="javascript学习15:创建对象">javascript学习15:创建对象</a>
</li>
<li>
<a href="/javascript-object-2.html" title="全面理解面向对象的 JavaScript">全面理解面向对象的 JavaScript</a>
</li>
<li>
<a href="/swipe.html" title="移动端触摸滑动插件swipe.js">移动端触摸滑动插件swipe.js</a>
</li>
<li>
<a href="/css-slide.html" title="纯CSS幻灯片">纯CSS幻灯片</a>
</li>
<li>
<a href="/nodejs-roll-back.html" title="win7安装不了nodejs及解决方法">win7安装不了nodejs及解决方法</a>
</li>
</ul>
<ul>
<li>
<a href="/693.html" title="如何在PS上使用Font Awesome字体" target="_blank">如何在PS上使用Font Awesome字体</a>
</li>
<li>
<a href="/wordpress-recent-update-posts-2.html" title="原创WordPress主题教程#1:最近修改文章" target="_blank">原创WordPress主题教程#1:最近修改文章</a>
</li>
<li>
<a href="/learn-bootstrap.html" title="bootstrap学习和使用的经验总结" target="_blank">bootstrap学习和使用的经验总结</a>
</li>
<li>
<a href="/css3-selection.html" title="使用css3改变选中文本的颜色" target="_blank">使用css3改变选中文本的颜色</a>
</li>
<li>
<a href="/js-function-5.html" title="js15-5:javascript继承" target="_blank">js15-5:javascript继承</a>
</li>
<li>
<a href="/2012-2.html" title="4.20-6.11,忙碌面试,思考前途" target="_blank">4.20-6.11,忙碌面试,思考前途</a>
</li>
<li>
<a href="/grunt.html" title="GRUNT:任务运行管理器" target="_blank">GRUNT:任务运行管理器</a>
</li>
<li>
<a href="/sublime-text2-dump.html" title="sublime text2打开文件为dump格式" target="_blank">sublime text2打开文件为dump格式</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>



实例三 CSS radio单选框下的选项卡切换效果实例页面CSS代码:

.test_box {
    width: 50%;
    min-height: 250px;
    margin: 1em auto;
    position: relative;
}
.test_tab {
    width: 25%;
    margin-right: -1px;
    border: 1px solid #ccc;
    border-bottom: 0;
    float: left;
}
.test_label {
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #eee;
    text-align: center;
}
.test_radio,
.test_tab_content {
    position: absolute;
    left: -999em;
}
.test_radio:checked ~ .test_tab_content {
    margin-top: -1px;
    padding: 1em 2em;
    border: 1px solid #ccc;
    left: 0;
    right: 0;
}
.test_radio:checked ~ .test_label {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    position: relative;
    z-index: 1;
}


HTML代码:

<div>
    <div>
        <input type="radio" id="testTabRadio1" name="tab" checked="checked" />
        <label for="testTabRadio1">选项卡1</label>
        <div>
            <p>我是选项卡1对应的美女</p>
            <img src="/image/study/s/s128/mm1.jpg" />
        </div>
    </div>
    <div> 
        <input type="radio" id="testTabRadio2" name="tab" />
        <label for="testTabRadio2">选项卡2</label>
        <div>
            <p>我是选项卡2对应的美女</p>
            <img src="/image/study/s/s128/mm2.jpg" />
        </div>
    </div>
    <div>
        <input type="radio" id="testTabRadio3" name="tab" />
        <label for="testTabRadio3">选项卡3</label>
        <div>
            <p>我是选项卡3对应的美女</p>
            <img src="/image/study/s/s128/mm3.jpg" />
        </div>
    </div>
</div>