本课标题: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>
![[推荐]中国达人秀：刘伟的1500字作文](https://1500zi.500zi.com/uploadfile/img/2024/08/28/d8eef0d8c8c197a59e7d5cc3ca1e9f0f.jpg)
