使用Jquery在项目开发过程中遇到的问题汇总--Tabs左右切换（二）

首先先抛出需求: Tabs区域的Tabs的个数是根据后台传过来的，当Tabs数目较多的时候，需要设计左右滑动的按钮通过点击显示隐藏的Tabs。

Tabs区域的HTML代码结构为：

contentBottomHTML += '' + '
 
 '
contentBottomHTML += '

contentBottomHTML指的是Tabs拼接的代码。

1.在Tabs区域外分别加了class为fa fa-chevron-right和fa fa-chevron-left的标签，但由于布局问题需要用

标签将

标签包起来，并设置行高才可以同行显示（css都写在style属性里）。

2.思路：左右滑动需要移动的是整个Tabs区域，先拿到这个区域的标签，本来是以为可以通过在第一步添加的标签中定义onclick事件，并在事件体中写$("#nav-individual").scrollLeft(50)中实现效果，最后发现还是too young， too simple。组内杰大佬过来一会就给了更为简便的实现效果的方案。

3.实现（write less, do more,先贴代码）

Invoice.clickArrow = function(direction){
      var navIndividual = $("#nav-individual");
      var oldLeft = navIndividual.css('left');
      var numOldLeft = oldLeft.slice(0,oldLeft.length-2)
      var newData =((parseInt(numOldLeft) + direction*(-125)));
      if((newData > 0 ) || newData < -(Invoice.tabLen*125 - 350)){
        return false;
      }
      navIndividual.css('left',newData +"px")
    }

简单解释一下，函数传参direction是为了控制左移右移的动作，首先我们拿到

标签，通过方法拿到每次点击时距离最左的距离，然后再定义了每次点击左移或者右移的距离（这里有个字符串剪切和整型转换的小细节，需要慢慢调一下），由于Tabs数目是有限的，需要判断Tabs停止的条件。当Tabs标签距离左边超过0（左移最大距离）或者小于最大Tabs宽度减去下面表格宽度的时候（右移最大距离），点击事件不再执行（tabLen指的是小Tabs的个数，所占宽度为125px）。最后将Left属性值设置为我们点击为之间设置的值。（PS：在最后效果实现的时候加了Transition过度动画让效果看起来更加流畅。）

整个Tabs左右滑动的逻辑不算十分复杂，但却是对CSS很好的复习方式，也是对业务实现能力好的锻炼机会。