1

一、overflow大法

心法:控制尺寸,超出部分用overflow:hidden砍掉。

<div class="tab">
    <div class="nav">
        <a href="#the1">ONE</a>
        <a href="#the2">TWO</a>
    </div>
    <div class="content">
        <div id="the1" class="cont">第一张</div>
        <div id="the2" class="cont">第二张</div>
    </div>
</div>
   .tab{
        width: 300px;
        height: 300px;
    }
    .nav{
        height: 30px
    }
    .content{
        height: 270px;
        padding-bottom: 50px;
        border-bottom: solid 20px red;
        overflow: hidden;
    }
    .cont{
        height: 270px;
    }
    #the1{
        background: green;
    }
    #the2{
        background: blue;
    }

小提示:overflow的作用范围,是width和padding,margin与border不包括。

二、radio大法

心法:用radio与label配合,结合:checked,使label被点击时控制内容部分的display。

<div class="tab">
         <div>
            <input type="radio" id="r-1" name="tab" checked>
            <label for="r-1" class="label-1">第一张</label>
            <div class="mod-1">
                <ul>
                    <li>275万购昌平邻铁三居</li>
                    <li>总价20万买一居</li>
                    <li>200万内购五环三居</li>
                    <li>北京首现零首付楼盘</li>
                </ul>
            </div>
        </div>
        <div>
            <input type="radio" id="r-2" name="tab">
            <label for="r-2" class="label-2">第二张</label>
            <div class="mod-2">
                <ul>
                    <li>新中式的酷色温情</li>
                    <li>深圳房价大跌,每平8W</li>
                    <li>800万买沙井三房</li>
                    <li>宝安房价平均900W</li>
                </ul>
            </div>
        </div>     
    </div>
       *{
            margin: 0;
            padding: 0;
        }

        .tab{
            width: 300px;
            height: 150px;
            margin-left: 30px;
            margin-top: 30px;
            border: 1px solid #eee;
            position: relative;
            overflow: hidden;
        }

        input[type='radio']{
            display: none;
        }

        input[type='radio']:checked~div[class^='mod']{
            display: block;
        }

        input[type='radio']:checked~label{
            background: orange;
        }

        .tab label{
            position: absolute;
            width: 60px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #eee;
        }

        .label-1{
            left: 0;
            top: 0;
        }

        .label-2{
            left: 60px;
            top: 0;
        }       

        [class^='mod']{
            position: absolute;
            top: 40px;
            left: 20px;
            display: none;
        }

Wall_Breaker
2.1k 声望1.2k 粉丝

生死之间,就是我的跃迁之路,全程记录,欢迎见证