本课标题:Tab切换
引入话术:咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切换,咱们先看下效果,就是这样的效果,上面有三个标题,下面有一个盒子,看我每点击一个标题,它的内容是不是就变了,咱们身边有很多这样的例子,京东,淘宝,都有tab切换,这就是tab切换,我在研发写项目的时候,每个项目都会用到tab切换,无论你用什么框架都会用到,比如vue,react,angular, 所以这个很重要,虽然 到时候会接触一些组件,但是你也要知道它的原理是什么,怎么实现的,咱们接下来讲下原生js讲下tab切换,咱们先来搭建一个静态页面,搭建静态页面大家应该没啥问题了吧,咱们先来分析一波,上面的标题,下面的内容。静态搭建完成,接下来我们就可以写js代码了吧,大家想下,我是不是要点击上面的标题,然后去改变,对吧,我应该用那种方式去获取元素呢?用id可以么,可以是可以是不是有点麻烦,要一个一个获取,是不是用获取多个元素的方式比较好,咱们先来获取下标题元素,document.getElementById(“title”).getElementByTagName(“li”),咱们看下获取到了吗,是不是获取到了一个伪数组,里面有咱们想要的所有元素,对吧,咱们获取到了标题,是不是也要获取下面的内容,是不是也要用获取标题的方法,对吧,咱们在控制台在打印一下,是不是也获取到了,接下来我们就可以绑定单击事件了吧,大家觉得我用一个一个去绑定么,是不是不用,我们是不是可以遍历这个伪数组,然后拿到每个要点击的标题,遍历伪数组是为了给每个标题绑定单击事件。遍历完是不是就可以绑定事件了,titlelist[i],titlist是不是就是咱们定义的伪数组,中括号然后里面加上索引,是不是就可以拿到伪数组里面的所有元素了对吧,接下来咱们打印一下this,看下,事件函数中this是不是指向事件源,所以咱们打印看下,是不是可以打印你点击的标题,咱们想下,你点击谁是不是要让当前的元素的颜色变成金色,其他的就是原来的颜色,对吧,是不是接下来要进行判断了,我怎么知道我点击的是不是当前的元素,就是说我怎么知道我点击的是第几个,是不是我们还要去循环一遍,然后再判断我点击的是不是当前的元素,判断比较下是不是当前被单机的,循环,if(this = titleList[j])如果等于当前的是不是就可以改变了,咱们看下效果,是不是其他的还是金色的,所以咱们是不是要加一个else,其他的去掉样式,咱们在想下,你的标题改变,下面的内容是不是也要跟着改变,对吧,再看下,标题的索引和内容的索引是不是一样的,所以当知道点击的是那个标题,是不是内容的索引值就知道了,
课堂内容:1)tab切换原理
2)tab切换实现步骤
3)静态搭建
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>tab切换</title><style>* {margin: 0;padding: 0;}#title {margin: 50px auto;width: 900px;overflow: hidden;list-style: none;}#title>li {float: left;width: 300px;height: 50px;background-color: blue;text-align: center;color: #fff;font-size: 30px;line-height: 50px;}#content {margin: auto;list-style: none;width: 900px;}#content>li {width: 900px;height: 400px;text-align: center;line-height: 400px;font-weight: bold;font-size: 50px;}#content>li:first-child {background-color: red;}#content>li:nth-child(2) {background-color: purple;display: none;}#content>li:last-child {background-color: hotpink;display: none;}</style></head><body><ul id="title"><li style="background-color: gold">标题一</li><li>标题二</li><li>标题三</li></ul><ul id="content"><li>内容一</li><li>内容二</li><li>内容三</li></ul></body><script>// 标题var titles = document.getElementById('title').getElementsByTagName('li')// 内容var contents = document.getElementById('content').getElementsByTagName('li')// 遍历titles是为了给标题绑定单击事件for (var i = 0; i < titles.length; i++) {console.log(titles[i])titles[i].onclick = function () {console.log(this)// 判断比较一下是否是当前的被单击的for (var j = 0; j < titles.length; j++) {if (titles[j] == this) {this.style.backgroundColor = 'gold'contents[j].style.display = 'block'} else {titles[j].style.backgroundColor = ''contents[j].style.display = 'none'}}}}</script></html>