tab toggle (average distribution)

<Divclass= "Aaa1">       <DivData-tabar= "0">Xxxxxxxxxxxxx</Div>       <DivData-tabar= "1">Xxxxxxxxxxxxx</Div>       <DivData-tabar= "2">Xxxxxxxxxxxxx</Div>       <DivData-tabar= "3">Xxxxxxxxxxxxx</Div>       <DivData-tabar= "4">Xxxxxxxxxxxxx</Div></Div>$ (function () {$ (". Aaa1"). Tabar (["I am Heading 1", "I am Heading 2", "I am Heading 3", "I am Heading 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; returnc* ((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; }; //to initialize            vardom=$ ( This); //adding elements            varLenli=arrtit.length; varStrhtml= "";  for(vari = 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> ")            //Hide ElementsDom.find (' Div[data-tabar] '). EQ (0). CSS ("Display", "block"). Siblings (' Div[data-tabar] '). CSS ("display", "none"); //Length Definition            varWdhli=100/lenli; Dom.find (' I.move '). CSS ("width", wdhli+ "%"); //Defining Methods            varBar=dom.find ('. W-tabar ')); Bar.find ('. Tabar>li '). Click (function(event) {vareqli=$ ( This). index (); Bar.find (' I.move '). Stop (). Animate ({"Left": eqli*wdhli+ "%"}, "Easeoutback")                //Show DivDom.children (' div[data-tabar= ' +eqli+ ') '). FadeIn (' siblings] '). Div[data-tabar (0);        }); })}) (window, jQuery);

 /*Initialize | begin*/HTML{font-size:10px;Line-height:1em;}Body,ul{margin:0;padding:0;}Ul,li{List-style:None;}/*Initialize | 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;}

tab toggle (average distribution)