css实现tab事件

1、利用label for 属性 （规定 label 与哪个表单元素绑定）。
2、利用radio的checked 属性 显示隐藏。

html代码

<nav class="accordion arrows">
    <header class="box">
        <label for="acc-close" class="box-title">Accordion menu</label>
    </header>
    <input type="radio" name="accordion" id="cb1" />
    <section class="box">
        <label class="box-title" for="cb1">菜单啊</label>
        <label class="box-close" for="acc-close"></label>
        <div class="box-content">Click on an item to open. Click on its header or the list header to close.</div>
    </section>
    <input type="radio" name="accordion" id="cb2" />
    <section class="box">
        <label class="box-title" for="cb2">菜单2啊</label>
        <label class="box-close" for="acc-close"></label>
        <div class="box-content">Add the class 'arrows' to nav.accordion to add dropdown arrows.</div>
    </section>
    <input type="radio" name="accordion" id="cb3" />
    <section class="box">
        <label class="box-title" for="cb3">菜单3啊</label>
        <label class="box-close" for="acc-close"></label>
        <div class="box-content">哎呀，你看到我了啊，真不好意思呢</div>
    </section>

    <input type="radio" name="accordion" id="acc-close" />
</nav>

css代码

        *{margin:0;padding:0}
        body{background: #f2f2f2;color:#333;}
        nav.accordion{width:400px;margin:20px auto;}
        header.box{
                   background:#0b7285;height:60px;
                   box-shadow: 0 -1px 0 #e5e5e5,
                               0 0 2px -2px rgba(0,0,0,.12),
                               0 2px 4px -4px rgba(0,0,0,.24);
                 }
        header label{font-size:26px;color:#fff;}
        input{display:none;width:100%;height:auto;}
       .box{position:relative;transition:all 0.15s ease-in-out;height:64px;}
       .box::before {
            content: '';position: absolute;display: block;top: 0;bottom: 0;left: 0;right: 0;pointer-events: none;
            box-shadow: 0 -1px 0 #e5e5e5,
                        0 0 2px rgba(0,0,0,.12),
                        0 2px 4px rgba(0,0,0,.24);
        }

        section.box{width:400px;background:#fff;color:#333;display:flex;flex-wrap: wrap; }
       .box-title{cursor: pointer;width: calc(100% - 40px); padding:0 20px;height:64px;line-height: 64px;}
       .arrows section .box-title:before{
                     position: absolute;display: block; content: '203a';left: 20px; top: -2px;font-size:30px;transition: transform .15s ease-in-out;
        }
        .arrows section .box-title {
            padding-left: 44px; width: calc(100% - 64px);
        }
        .box-close {
            position: absolute;height: 64px;width: 100%;top: 0; left: 0; z-index:10; cursor: pointer; display: none;
        }
        .box-content{display:none;width: calc(100% - 40px);padding: 30px 20px;}
        input:checked+ .box{margin:10px 0; box-shadow: 0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);height:auto;}
        input:checked + .box .box-title {border-bottom: 1px solid rgba(0,0,0,.18);}
        input:checked + .box .box-content, input:checked + .box .box-close {display: inline-block;}
        input:checked + section .box-title:before {transform: rotate(90deg);}