SOURCE

$(function () {
    $('.js-tabs').each(function (index, item) {
        var $block = $(item);
        $block.find('.tit > .item').on('click', function (e) {
            if(!$(this).hasClass('on')) {
                var $currentTit = $block.find('.tit > .on');
                var $currentDesc = $block.find('.desc > .on');
                var $clickTit = $(this);
                var $clickDesc = $($block.find('.desc > .item')[$clickTit.index()]);

                $currentTit.removeClass('on');
                $clickTit.addClass('on');
                if($block.hasClass('js-anim')) {
                    $currentDesc.fadeOut('fast', function () {
                        $(this).removeClass('on');
                        $clickDesc.fadeIn('fast', function () {
                            $(this).addClass('on');
                        });
                    });
                } else {
                    $currentDesc.removeClass('on');
                    $clickDesc.addClass('on');
                }
            }
        });
    });
});

<!-- 1. 长线条 -->
<div class="m-tabs js-tabs js-anim">
    <ul class="tit col-3">
        <li class="item on"><span class="subitem">选项一</span></li>
        <li class="item"><span class="subitem">选项二</span></li>
        <li class="item"><span class="subitem">选项三</span></li>
    </ul>
    <div class="desc">
        <div class="item on">最基本的使用加上 class 名字 js-tabs 即可</div>
        <div class="item">最外层加上 class 名字 js-anim 即可动画切换</div>
        <div class="item">3</div>
    </div>
</div>


<!-- 2. 短线条 -->
<div class="m-tabs js-tabs">
    <ul class="tit col-3 short-bottom">
        <li class="item on"><span class="subitem">选项一</span></li>
        <li class="item"><span class="subitem">选项二</span></li>
        <li class="item"><span class="subitem">选项三</span></li>
    </ul>
    <div class="desc">
        <div class="item on">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</div>


<!-- 3. 2 到 5 列 -->
<div class="m-tabs js-tabs">
    <ul class="tit col-4">
        <li class="item on"><span class="subitem">选项一</span></li>
        <li class="item"><span class="subitem">选项二</span></li>
        <li class="item"><span class="subitem">选项三</span></li>
        <li class="item"><span class="subitem">选项四</span></li>
    </ul>
    <div class="desc">
        <div class="item on">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</div>

<!-- 4. 自适应宽度 -->
<div class="m-tabs js-tabs">
    <ul class="tit col-auto">
        <li class="item on"><span class="subitem">选项一</span></li>
        <li class="item"><span class="subitem">很长很长很长很长的选项</span></li>
        <li class="item"><span class="subitem">很长很长很长很长的选项</span></li>
        <li class="item"><span class="subitem">很长很长很长很长的选项</span></li>
        <li class="item"><span class="subitem">很长很长很长很长的选项</span></li>
        <li class="item"><span class="subitem">很长很长很长很长的选项</span></li>
    </ul>
    <div class="desc">
        <div class="item on">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</div>

.m-tabs {}
    .m-tabs > .tit { overflow: hidden; background: #fff; }
        .m-tabs > .tit > .item { float: left; height: 45px; line-height: 45px; border-bottom: 2px solid #fff; text-align: center; cursor: pointer; box-sizing: border-box; }
        .m-tabs > .tit > .item.on { border-bottom-color: #03a9f4; color: #03a9f4; }

        .m-tabs > .tit.short-bottom > .item, .m-tabs > .tit.short-bottom > .item.on { border-bottom: none; }
        .m-tabs > .tit.short-bottom .subitem { display: inline-block; padding: 0 15px; height: 100%; border-bottom: 2px solid #fff; box-sizing: border-box; }
        .m-tabs > .tit.short-bottom > .item.on .subitem { border-bottom-color: #03a9f4; color: #03a9f4; }

        .m-tabs > .tit.col-2 > .item { width: 50%; }
        .m-tabs > .tit.col-3 > .item { width: 33.3333%; }
        .m-tabs > .tit.col-4 > .item { width: 25%; }
        .m-tabs > .tit.col-5 > .item { width: 20%; }
        .m-tabs > .tit.col-auto { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .m-tabs > .tit.col-auto > .item { float: none; display: inline-block; padding: 0 10px; }

    .m-tabs > .desc .item { display: none; }
    .m-tabs > .desc .item.on { display: block; }