# **.點擊實現切換-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',
})
```
