原生js实现Tab切换

我带你们飞

已于 2022-08-17 22:06:21 修改

阅读量1.7k

点赞数

分类专栏：教案文章标签：前端 javascript 开发语言

于 2022-08-17 22:05:54 首次发布

本文链接：https://blog.csdn.net/weixin_47619284/article/details/126395317

版权

教案专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本课标题: 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>