css，js手写tab切换（pc）

不论是swiper还是mui的tab切换都存在高度问题。想来想去还是自己写

html

            <div class="wrapper">
                <div class="main">
                    <h4 id="title">
                        <span class="on">退款中</span>
                        <span>已退款</span>
                    </h4>
                    <div id="con">
                        <ul class="on">
                            <div class="f-j-sb p-10 b-g-white">
                                <div>
                                    <p>A桶×3</p>
                                    <p>B桶×3</p>
                                    <p>C桶×3</p>
                                </div>
                                <div>
                                    <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
                                </div>
                                <div class="m-r-30 t-c">
                                    <p>送水师傅上门收桶</p>
                                    <p>合计：<span class="red">￥10.00</span></p>
                                    <button class="quxiao">取消退桶</button>
                                </div>
                            </div>
                            <div class="f-j-sb p-10 b-g-white m-t-20">
                                <div>
                                    <p>A桶×3</p>
                                    <p>B桶×3</p>
                                    <p>C桶×3</p>
                                </div>
                                <div>
                                    <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
                                </div>
                                <div class="m-r-30 t-c">
                                    <a href="Qr-code.html"><p class="f-c-blue">展示二维码</p></a>
                                    <p>合计：<span class="red">￥10.00</span></p>
                                    <button class="quxiao">取消退桶</button>
                                </div>
                            </div>
                        </ul>
                        <ul>
                            <div class="f-j-sb p-10 b-g-white">
                                <div>
                                    <p>A桶×3</p>
                                    <p>B桶×3</p>
                                    <p>C桶×3</p>
                                </div>
                                <div>
                                    <p class="m-t-50 f-s-12">2018.11.14 11:52:40</p>
                                </div>
                                <div class="m-r-30 t-c">
                                    <p>送水师傅上门收桶</p>
                                    <p>退款成功</p>
                                    <button class="quxiao">查看详情</button>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </div>

css

.t-c{
        text-align: center;
    }
    .red{
        color: red;
        font-size: 16px;
    }
    .quxiao {
        height: 25px;
        border: 1px solid #0090FF;
        color: #0090FF;
        line-height: 0.5;
        margin-top: 10px;
    }

    .main {
        width: 400px;
        margin: 0 auto;
    }

    #title {
        height: auto;
        display: flex;
        background: white;
        padding: 10px 0;
        font-weight: normal
    }

    #title span {
        float: left;
        width: 50%;
        height: 30px;
        margin-right: 5px;
        color: #333;
        background: white;
        text-align: center;
        cursor: pointer;
        font-size: 17px
    }

    #title span.on {
        color: #0090FF;
        border-bottom: 2px solid #0090FF
    }

    #con {
        height: auto;
    }

    #con ul {
        display: none;
    }

    #con ul.on {
        display: block;
    }

    #con ul li {
        height: 24px;
        line-height: 24px;
        border-bottom: 1px dotted #ccc;
        text-indent: 10px;
    }

js

 //tab
    var oTitle = document.getElementById('title');
    var aSpan = oTitle.getElementsByTagName('span');
    var oCon = document.getElementById('con');
    var aUl = oCon.getElementsByTagName('ul');
    var i = 0;
    for (i = 0; i < aSpan.length; i++) {
        aSpan[i].index = aUl[i].index = i;
        aSpan[i].onclick = function () {
            for (i = 0; i < aSpan.length; i++) {
                aSpan[i].className = '';
                aUl[i].className = '';
            }
            this.className = 'on';
            aUl[this.index].className = 'on';
        }
    }

起码不用担心高度问题。