原生選項卡

<style>
    .tab-menu {
        overflow: hidden;
        height: 3em;
        background-color: white;
    }

    .tab-menu ul {
        overflow: hidden;
        list-style: none;
        padding-left: 0px
    }

    .tab-menu li {

        font-size: 1.2em;
        text-align: center;
        display: block;
        width: 49%;
        float: left
    }

    ul li:first-Child {
        border-right: 2px solid #EFEFF4;
    }

    .tab-box div {
        display: none;
    }

    .tab-box div:first-Child {
        display: block;
    }

    .change {
        color: #FF6600;
    }
</style>

<div class="tab">
    <div class="tab-menu">
        <ul>
            <li class="change">可用</li>
            <li>歷史</li>
        </ul>
    </div>
    <div class="tab-box">
        <div> 123</div>
        <div>456</div>
        <div>789</div>
    </div>
</div>

<script type="text/javascript" src="../../assets/sbv2/js/jquery.min.js"></script>

<script>var app = new Framework7();</script>
<script>
    $().ready(function () {
        $(".tab-menu li").click(function () {
            //通過 .index()方法獲取元素下標，從0開始，賦值給某個變量
            var _index = $(this).index();
            //讓內容框的第 _index 個顯示出來，其他的被隱藏
            $(".tab-box>div").eq(_index).show().siblings().hide();
            //改變選中時候的選項框的樣式，移除其他幾個選項的樣式
            $(this).addClass("change").siblings().removeClass("change");
        });
    });
</script>