html如何实现tab页面切换

<style type="text/css">

        *{margin: 0;padding: 0;}

        .wrap{

            margin: 20px auto;

            width: 403px;

            height: 600px;

            border:1px solid brown;

            position: relative;

        }

        label{

            width: 100px;

            height: 30px;

            float: left;

            text-align: center;

            line-height:30px;

            border-right: 1px solid brown;

            border-bottom: 1px solid brown;

        }

        label:nth-of-type(4){

            border-right: none;

        }

        label span{

            cursor: pointer;

        }

        label div{

            width: 403px;

            height: 568px;

            position: absolute;

            left: 0;

            top: 31px;

            background: #eeeeee;

            display: none;

        }

        label input{

            width: 0;

        }

        input:checked+div{

            display: block;

        }

    </style>