tab切换（平均分配）

<div class="aaa1">
<div data-tabar="0">XXXXXXXXXXXXX</div>
<div data-tabar="1">XXXXXXXXXXXXX</div>
<div data-tabar="2">XXXXXXXXXXXXX</div>
<div data-tabar="3">XXXXXXXXXXXXX</div>
<div data-tabar="4">XXXXXXXXXXXXX</div>
</div>

$(function(){
        $(".aaa1").tabar(["我是标题1","我是标题2","我是标题3","我是标题4"]);
})

/*
 * @author:Cheryl
 * @made:2015-12-31
*/
jQuery.extend( jQuery.easing,
{
  easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
  },
});

(function (window, $, undefined) {
    $.extend($.fn, {
        tabar: function (arrTit) {
if ($(this)[0] == null || $(this)[0] == undefined) { return; };
//进行初始化
var dom=$(this);
//添加元素
var lenLi=arrTit.length;
var strHtml="";
for (var i = 0; i < lenLi; i++) {
                strHtml+="<li>"+arrTit[i]+"</li>"
            }
            dom.find('.w-tabar').remove();
            dom.prepend("<div class='w-tabar'><ul class='tabar'>"+strHtml+"</ul><i class='move'></i></div>")
//隐藏元素
            dom.find('div[data-tabar]').eq(0).css("display","block").siblings('div[data-tabar]').css("display","none");
//长度定义
var wdhLi=100/lenLi;
            dom.find('i.move').css("width",wdhLi+"%");
//定义方法
var bar=dom.find('.w-tabar');
            bar.find('.tabar>li').click(function(event) {
var eqLi=$(this).index();
                bar.find('i.move').stop().animate({"left":eqLi*wdhLi+"%"}, 300,"easeOutBack")
//显示div
                dom.children('div[data-tabar='+eqLi+']').fadeIn(500).siblings('div[data-tabar]').fadeOut(0);
            });
        },
    })
})(window, jQuery);

 /*初始化 | begin*/
html{font-size: 10px;line-height: 1em;}
body,ul{margin: 0;padding:0;}
ul,li{list-style: none;}
/*初始化 | end*/
.move{-webkit-transition: all 0.3s ease 0;-webkit-transition: all 0.3s ease 0;-moz-transition: all 0.3s ease 0;-o-transition: all 0.3s ease 0;transition: all 0.3s ease 0;}
.tabar{display: table;table-layout: fixed;width: 100%;border-bottom: 1px solid #e8e8e8;overflow: hidden;}
.tabar>li{display: table-cell;font-size: 1.4em;line-height: 1.2em;padding:10px 2px;text-align: center;position: relative;cursor:pointer;vertical-align: middle;}
.tabar>li:after{content:"";height: 15px;width: 1px;background-color: #e8e8e8;position: absolute;left: -1px;top: 50%;margin-top: -8px;}
.w-tabar{width:100%;position: relative;margin-bottom: 21px;}
.w-tabar i{width:50%;height: 3px;display: block;position: absolute;bottom: 0;background: #57d0ff;}