滑动tab切换特效

仿一个站，有个滑动tab切换特效，目标站是引入的一个jq插件，看了下页面就只有这一个特效，不想引入插件。于是自己写了一个，凑合能用。

function tabs(tabTit,on,tabCon){
   var kd1 =$(window).width(); //获取一个宽度
   var kd = ($(window).width() *3);//滑动有三个tab，所以乘以3获取一个宽度
   $(tabCon).css({"width": kd}); //给最外面的box设定一个宽度
   $(tabCon).children().css({"width": kd1}); //给滚动的每个box设定一个宽度
   $(tabTit).children().click(function(){
      var index = $(tabTit).children().index(this);//获取滚动box的顺序号
      var sj = index * kd1;//顺序号乘以宽度
      $(this).addClass(on).siblings().removeClass(on);//给tab的标题部分一个class做样式
      $(tabCon).css({"transform":"translateX(-"+ sj + "px)"});//给外部box设置一个translateX值
   });
};
tabs(".tab-hd","on",".tab-bd");

html样式大概是这样的：

<div class="tx-box">
   <ul class="tab-hd">
       <li class="on">第一个</li>
       <li>第2个</li>
       <li>第3个</li>
   </ul>
   <div class="最外部box">
       <div class="滚动的box">
           <div>第一个的内容</div>
           <div>第2个的内容</div>
           <div>第3个的内容</div>
       </div>
   </div>
</div>

这个东西让我记住的有两点：

.css里面有()的里面调用变量要用“+变量名称+”；

.index(this)可以获取到顺序编号；