# **.点击实现切换-tap**
##### 1.监听头部的点击事件
```
$(function () {
//1.头部的点击事件
$('.header li').tap(function () {
//2.拿到点击的索引
var index=$(this).index();
alert(index);
});
})
```
##### 2.点击实现切换-css
1.文字的切换
```
$(function () {
//1.头部的点击事件
$('.header li').tap(function () {
//2.拿到点击的索引
var index=$(this).index();
// alert(index);
$(this).addClass('current')
/*同级节点，清除样式*/
.siblings().removeClass('current');
});
})
```
2.线条的移动
```
$('.line').css({
transform:'translateX('+ index * 100 +'%)', // 相对自身移动100%
transition:'all 0.35s linear',
})
```
3.内容的移动
```
$('.list').css({
transform:'translateX('+ -index * 50 +'%)', // 相对自身移动50%
transition:'all 0.35s linear',
})
```
