纯CSS实现页签切换效果

最新推荐文章于 2024-04-11 11:57:57 发布
weixin_34238633
最新推荐文章于 2024-04-11 11:57:57 发布
阅读量894
点赞数
原文链接：https://segmentfault.com/a/1190000003035930
版权
主要运用了 CSS3 的 :checked 选择器，
代码结构跟使用js差不多，只是多了几个radio，
不知道性能上是js快还是css快呢？
codepen地址：http://codepen.io/YuanWing/pen/RPqvad
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>CSS3 TAB</title>
    <style>
        body {
            font-family: 'Microsoft YaHei'; 
            font-size: 14px;
            background-color: #f5f4f7;
            margin: 0;
            color: #252525;
        }
        a {
            text-decoration: none;
        }
        h3, h4 {
            margin: 0;
            font-weight: 400;
            font-size: inherit;
        }
        ul {
            padding-left: 0;
            list-style: none;
            margin: 0;
        }
        p {
            margin-top: 0;
            margin-bottom: 0;
        }
        .Jhds {
            position: relative;
        }
        .Jhds .radio {
            opacity: 0;
            position: absolute;   
        }
        .Jhds .radio:nth-of-type(1):checked ~ .tab-title label:nth-of-type(1) {
            color: #fff;
            background-color: #498fee;
        }
        .Jhds .radio:nth-of-type(2):checked ~ .tab-title label:nth-of-type(2) {
            color: #fff;
            background-color: #498fee;
        }
        .Jhds .radio:nth-of-type(3):checked ~ .tab-title label:nth-of-type(3) {
            color: #fff;
            background-color: #498fee;
        }
        .Jhds .radio:nth-of-type(1):checked ~ .tab-outer .tab-inner:nth-of-type(1) {
            display: block;
        }
        .Jhds .radio:nth-of-type(2):checked ~ .tab-outer .tab-inner:nth-of-type(2) {
            display: block;
        }
        .Jhds .radio:nth-of-type(3):checked ~ .tab-outer .tab-inner:nth-of-type(3) {
            display: block;
        }
        .Jhds .tab-title {
            font-size: 0;
            padding: 15px;
            text-align: center;
        }
        .Jhds .tab-title label{
            display: inline-block;
            color: #498fee;
            text-align: center;
            background-color: #fff;
            border: 1px solid #498fee;
            font-size: 14px;
            width: 30%;
            padding: 5px 0;
        }
        .Jhds .tab-title label:first-child {
            border-right: 0 none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .Jhds .tab-title label:last-child {
            border-left: 0 none;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .Jhds .tab-outer .tab-inner {
            display: none;
        }
        .Jhds .tab-inner li{
            position: relative;
            background-color: #fff;
        }
        .Jhds .title:after,
        .Jhds .tab-inner li:before,
        .Jhds .tab-inner li:last-child:after{
            position: absolute;
            left: 0;
            content: '';
            width: 100%;
            height: 1px;
            font-size: 0;
            background-color: #d9d9d9;
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
        .Jhds .tab-inner li:before {
            top: 0;
        }
        .Jhds .title:after,
        .Jhds .tab-inner li:last-child:after {
            bottom: 0;
        }
        .Jhds .title {
            padding: 10px;
            position: relative;
            overflow: hidden;
        }
        .Jhds .title .Jhds-num {
            color: #498fee;
            white-space: nowrap;
        }
        .Jhds .title .time {
            float: right;
            display: inline-block;
        }
        .Jhds .list {
            padding: 10px 60px 10px 10px;
            position: relative;
            color: #252525;
            display: block;
        }
        .Jhds .price {
            color: #f90;
            margin-top: 5px;
        }
        .Jhds .num {
            position: absolute;
            right: 30px;
            top: 50%;
            height: 20px;
            line-height: 20px;
            margin-top: -10px;
        }
        .arrow {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -6px;
            width: 10px;
            height: 10px;
            border-left: 1px solid #cfcfcf;
            border-top: 1px solid #cfcfcf;
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }

        @media screen and (max-width:370px) {
            .Jhds .title .time {
                float: none;
            }
        }
    </style>
</head>
<body>
    <div class="Jhds">
        <input checked class="radio" type="radio" name="Jhds" id="Jhds1">
        <input class="radio" type="radio" name="Jhds" id="Jhds2">
        <input class="radio" type="radio" name="Jhds" id="Jhds3">
        <div class="tab-title">
            <label for="Jhds1">待付款</label>
            <label for="Jhds2">待签收</label>
            <label for="Jhds3">已完成</label>
        </div>
        <div class="tab-outer">
            <ul class="tab-inner">
                <li>
                    <h3 class="title">
                        <span class="Jhds-num">进货单号：jkdjh2015072623125699</span>
                        <span class="time">今天 23：12 进货</span>
                    </h3>
                    <a class="list" href="###">
                        <h4>60°飞天茅台最好的茅台浓香1000ml</h4>
                        <p class="price">待确认：¥129.00</p>
                        <span class="num">X6</span>
                        <span class="arrow"></span>
                    </a>
                </li>
            </ul>
            <ul class="tab-inner">
                <li>
                    <h3 class="title">
                        <span class="Jhds-num">进货单号：jkdjh2015072623965199</span>
                        <span class="time">今天 23：12 进货</span>
                    </h3>
                    <a class="list" href="###">
                        <h4>50°西凤·御宴酒（精装版）500ml</h4>
                        <p class="price">已发货：¥39.00</p>
                        <span class="num">X1</span>
                        <span class="arrow"></span>
                    </a>
                </li>
            </ul>
            <ul class="tab-inner">
                <li>
                    <h3 class="title">
                        <span class="Jhds-num">进货单号：jkdjh2015072623126899</span>
                        <span class="time">今天 23：12 进货</span>
                    </h3>
                    <a class="list" href="###">
                        <h4>法国富乐男爵干红葡萄酒豪华大礼包</h4>
                        <p class="price">已签收：¥369.00</p>
                        <span class="num">X6</span>
                        <span class="arrow"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
weixin_34238633
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫