css样式：

        .switchbox{ border-bottom: #d2d2d2 1px solid; padding: 0 15px;}

        .switchbox a{ position: relative; display: inline-block; width: calc(50% - 1px); height: 45px; line-height: 45px; text-align: center; float: left; -webkit-transition: all .3s linear; transition: all .3s linear;}

        .switchbox a:nth-child(2):after{content: ''; display: inline-block; width: 1px; height: 20px; background: #999; position: absolute; top: 50%; left: 0; margin-top: -10px;}

        .switchbox a:before{display: block; content: ''; width: 100%; height: 2px; background: #ff9a00; position: absolute; bottom: 0; left: 0; opacity: 0; -webkit-transition: all .3s linear; transition: all .3s linear;}

        .switchbox a.on{color: #ff9a00;}

        .switchbox a.on:before{opacity: 1;}

        .slide{padding-top: 30px;}

html样式：

    <div class="tab cl">

        <div class="switchbox cl">

            <a class="on">商城订单</a>

            <a>业务订单</a>

        </div>

        <div class="slide cl">

            <section class="order-cont" style="height: 300px; background: #333;">

                1

            </section>

            <section class="order-cont" style="height: 500px; background: #de3;">

                2

            </section>

        </div>

    </div>

jq样式：

        $(function(){

            var $stage = $('.tab'),

                $TabLi = $stage.find('.switchbox a'),

                $LayBox = $stage.find('.slide .order-cont');

            function tab(_Tabli,_Laybox,c,e){

                _Tabli.each(function(i){

                    $(this).bind(e,function(){

                        _Laybox.hide().eq(i).show();

                        _Tabli.removeClass(c);

                        $(this).addClass(c);

                    })

                    if ($(this).hasClass(c)) {

                        $(this).addClass(c);

                        _Laybox.hide().eq(i).show();

                    }

                })  

            }

            tab($TabLi,$LayBox,"on","click");

        })