找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS实现tab切换

2018-11-25 分类：CSS 阅读(779) 评论(0)
前端开发we文档
开发需求文档 前端
前端开发规范 百度文档
标准前端开发规范文档

结构布局：把每一个标签和其对应的标签内容作为一个区块，标签使用label，内容区块使用定位。

实现原理：当点击label时候，相应的input会被触发一个checked事件然后利用css选择器选择它的兄弟节点设置内容区块display:block;，默认内容区块是display:none;

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <style type=”text/css”>
            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }
            body {
                font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’,
                    Helvetica, Arial, sans-serif, ‘Apple Color Emoji’,
                    ‘Segoe UI Emoji’, ‘Segoe UI Symbol’;
            }
            ul,
            li {
                list-style: none;
            }
            .tab-content:after {
                display: block;
                content: ”;
                clear: both;
                height: 0;
                visibility: hidden;
            }
            .tab-content li {
                float: left;
                margin-right: 3px;
            }
            .tab-content li:last-child {
                margin-right: 0;
            }
            .tab-content li input {
                display: none;
            }
            .tab-content li input:checked ~ .navI-txt {
                display: block;
            }
            .tab-content li input:checked + .navI-tit {
                background: #fff;
                border-bottom: none;
                z-index: 1;
                position: relative;
            }
            .tab-content li label {
                display: block;
                padding: 0 15px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                cursor: pointer;
                border: 1px solid #c9c9ca;
                background-color: #ededef;
                border-radius: 3px 3px 0 0;
                font-size: 14px;
                color: #535353;
            }
            .tab-content li .navI-txt {
                position: absolute;
                top: 28px;
                left: 0px;
                display: none;
                width: 100%;
                border: 1px solid #cbcbcb;
                margin-top: -1px;
            }
        </style>
    </head>
    <body>
        <ul class=”tab-content”>
            <li>
                <input
                    class=”navI-radio”
                    name=”nav”
                    type=”radio”
                    id=”nav1″
                    checked
                />
                <label class=”navI-tit” for=”nav1″>项目一</label>
                <p class=”navI-txt”>项目一内容</p>
            </li>
            <li>
                <input class=”navI-radio” name=”nav” type=”radio” id=”nav2″ />
                <label class=”navI-tit” for=”nav2″>项目二</label>
                <p class=”navI-txt”>项目二内容</p>
            </li>
            <li>
                <input class=”navI-radio” name=”nav” type=”radio” id=”nav3″ />
                <label class=”navI-tit” for=”nav3″>项目三</label>
                <p class=”navI-txt”>项目三内容</p>
            </li>
            <li>
                <input class=”navI-radio” name=”nav” type=”radio” id=”nav4″ />
                <label class=”navI-tit” for=”nav4″>项目四</label>
                <p class=”navI-txt”>项目四内容</p>
            </li>
        </ul>
    </body>
</html>
前端开发方案文档
前端的接口开发文档
前端开发看不懂文档
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论