方法1（老方法）：此方法使用的是排他思想来实现tab栏效果，以及使用一个变量that的方法来解决构造函数中的this指向问题。
Document .active-btn {
color: red;
}.con .box {
display: none;
}.con .active {
display: block;
}
新闻1新闻1新闻1新闻1新闻1新闻1新闻1
历史1历史1历史1历史1历史 1历史1历史1方法2（新方法）：使用自定义类名的方法，添加和删除类名来实现tab栏的效果，以及使用ES6新增方法箭头函数来解决构造函数中的this指向问题。
Document .active-btn {
color: red;
}.con .box {
display: none;
}.con .active {
display: block;
}
新闻1新闻1新闻1新闻1新闻1新闻1新闻1
历史1历史1历史1历史1历史 1历史1历史1总结：
构造方法内部的this---->指构造函数对象
事件内部的this---->指触发事件的元素
匿名函数（作为参数的匿名函数）尽量都写成箭头函数，因为变成箭头函数之后，就失去了自身的this
(箭头函数写法简记:括号左边的function去掉变成右边的箭头）
事件处理函数要不要写成箭头函数看需求
【对象|自己定义构造函数来实现tab栏效果以及this的指向问题】
推荐阅读
- 节流--防抖
- 剑指offer29顺时针打印矩阵
- JavaScript 权威指南-学习笔记（一）
- 网页|SheetJS xlsx js库入门使用
- 单线程的 JavaScript 是怎么实现异步的?
- React|Redux中间件及其开发者工具
- 熊猫周刊|《熊猫周刊》-2022/03/25
- js|阿里开源项目LowCodeEngine低代码开发引擎
- React 性能调优记录（下篇），如何写高性能的代码