H5实战(二)：Tab标签切换效果

一 Tab标签切换效果的思路与实现

1.目标效果：

实现鼠标移到不同的tab标签上，下面对应的内容进行切换的效果，同时，被选中的选项卡有左右边框，无下边框，而未被选中的则存在下边框。

2.实现思路

1）点击选择的部分使用ul实现，设定好整个装标题的div的宽度，然后计算出每个标题所占的宽度，并设置文字居中即可，这里应注意留出边框的位置，比如装标题的容器宽度为300，有5个标题，那么可设置每个标题宽度为58，左右各留出1px的padding，这是为了后期的出现左右边框占位置，还应注意留出下边框的位置。

2）将第一个标题位置添加类名为select，并在css中设置选中后的样式，如设置左右边框，并将padding归零。

3）内容部分每个选项卡对应一个盒子，设置盒子内容样式，并将第一个盒子设置display为block，其余都为none。

4）js部分：当某个选项卡的鼠标事件触发后，清除所有选项卡上的类名以及设所有内容模块的display为none，并设置这一触发事件的选项卡类名为select，其对应的内容模块display为block（可在循环最开始时为每个选项卡设置id为其对应的序号，则其id号对应的也是对应显示模块的序号）。

3.代码部分：

1）js部分代码：