js高级--继承方法做tab切换

老路的武器库

于 2022-12-08 21:13:19 发布

阅读量108

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/Lzen6719/article/details/128243861

版权

本文通过创建类的继承方式，详细介绍了如何利用JavaScript实现Tab切换功能。首先定义父类，接着处理切换逻辑，利用this和箭头函数处理当前激活的标签。最后，创建子类并继承父类的Tab切换功能。

摘要由CSDN通过智能技术生成

使用继承方式制作；

步骤：

一，先创建class父类，然后获取标签

二，然后是切换的代码了，需要用到this和箭头函数，其中的this是直接指向切换的对象

最后就是创建子类，并继承tab切换父类

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            /* height: 400px; */
            margin: 20px auto;
            border: 2px solid black;
        }
        .box ul{
            display: flex;
            justify-content: center;
        }
        li{
            width: 99px;
            line-height: 35px;
            text-align: center;
            background-color: rgb(171, 126, 126);
            font-size: 15px;
            font-weight: bold;
            border-right: 1px solid pink;
            cursor: pointer;
        }
        .bg{
            background-color: violet !important;
        }
        h1{
            display:none;
        }