tab切换(可切换可不切换) [ 平均分布 + 自适应字数分布 ]

 /*初始化 | 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;}

/*第二种*/
.tabar_ato{width: auto;}
.tabar_ato>li{padding-left:20px;padding-right:20px;white-space: nowrap;}

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

$(function(){
        $(".aaa1").tabar({"arr":["我1","标题2","我是ghkhkghkjghj题3","是标题4"],"style":"auto","isOn":true});
        $(".aaa2").tabar({"arr":["我1","标题2","我是gh","是标题4"],"isOn":true});
    })

/*
 * @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) {
    function tabDiv(dom,eqLi){
        dom.children('div[data-tabar='+eqLi+']').fadeIn(500).siblings('div[data-tabar]').fadeOut(0);
    }
    $.tabarClass={
        arr:["标题1","标题2"],
        style:"default",//auto
        odf:{
            class:"tabar",
        },
        oato:{
            class:"tabar tabar_ato",
        },
        isOn:true,
    }
    $.extend($.fn, {
        tabar: function (option) {
            if ($(this)[0] == null || $(this)[0] == undefined) { return; };
            //进行初始化
            var options=$.extend($.tabarClass,option||{});
            var dom=$(this);
            //添加元素
            var lenLi=options.arr.length;
            var strHtml="";
            for (var i = 0; i < lenLi; i++) {
                strHtml+="<li>"+options.arr[i]+"</li>"
            }
            dom.find('.w-tabar').remove();
            dom.prepend("<div class='w-tabar'><ul class='"+(option.style==="auto"?$.tabarClass.oato.class:$.tabarClass.odf.class)+"'>"+strHtml+"</ul><i class='move'></i></div>")
            //隐藏元素
            if (option.isOn) {
                dom.find('div[data-tabar]').eq(0).css("display","block").siblings('div[data-tabar]').css("display","none");
            }else{}//不需要进行切换

            //定义方法
            var bar=dom.find('.w-tabar');      
            var barUL=bar.find('.tabar');
            var barLi=barUL.children('li');
            //初始化 i 长度定义
            var wdhLi=barLi.eq(0).innerWidth();
            dom.find('i.move').css("width",wdhLi+"px");

            //定义方法
            if (option.style==="auto") {
                var arrLi=[];
                var leftLi=[0]
                var sNum=0;
                for (var i = 0; i < lenLi; i++) {
                    sNum+=arrLi[i]=barLi.eq(i).innerWidth();
                    leftLi[i+1]=sNum;
                }
                dom.find('i.move').css("width",wdhLi+"px");
                //定义方法
                barLi.click(function(event) {
                    var eqLi=$(this).index();
                    bar.find('i.move').stop().animate({"left":leftLi[eqLi]+"px","width":arrLi[eqLi]+"px"}, 300,"easeOutBack");
                    if (option.isOn) {tabDiv(dom,eqLi);}else{}
                });
            }else{
                wdhLi=100/lenLi;
                barLi.click(function(event) {
                    var eqLi=$(this).index();
                    bar.find('i.move').stop().animate({"left":eqLi*wdhLi+"%"}, 300,"easeOutBack");
                    // dom.children('div[data-tabar='+eqLi+']').fadeIn(500).siblings('div[data-tabar]').fadeOut(0);
                    if (option.isOn) {tabDiv(dom,eqLi);}else{}
                });
            }
        },
    })
})(window, jQuery);