实现效果：
点击按钮，出现对应的div内容。常用于页面切换效果。
<!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>Document</title>
<style>
.box button{
width: 100px;
height: 50px;
}
.box .active{
background-color: pink;
}
.box div{
width: 300px;
height: 300px;
border: 2px solid palegreen;
display: none;
}
.box div.on{
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="active">首页</button>
<button>企业介绍</button>
<button>新闻</button>
<div class="on">腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道</div>
<div>360一个主页,整个世界,为用户提供门户、新闻、视频、游戏、小说、彩票等各种分类的优秀内容和网站入口,提供简单便捷的上网导航服务。安全上网,从360导航开始。</div>
<div>今天要下雨了，我要早点回去。</div>
</div>
<script>
class Tab{
constructor(parent){
this.box = document.querySelector(parent);
this.btns = this.box.querySelectorAll('button');
this.divs = this.box.querySelectorAll('div');
this.init();//调用入口方法
}
init(){
for(let i = 0 ;i<this.btns.length; i++){
let that = this; //注解1
this.btns[i].onclick = function(){
//注解2
for(let i = 0;i<that.btns.length;i++){
//注解3
that.btns[i].className = '';
that.divs[i].className = ''
}
// 只有点击的按钮和对应下标的div有样式
// that.btns[i].className = 'active' 这个和下面一行一个意思，只是写法不同
this.className = 'active';
that.divs[i].className = 'on'
}
}
}
}
// 实例化，传入参数
new Tab('.box')
</script>
</body>
</html>
<button class="active">按钮</button>，点击事件里的 this.btns[i] 就相当于是’'<button class="active">按钮</button>.btns[i]btns集合btns[i]，这肯定就会报错无法读取未定义的属性啦，所以要在注解1的位置先存一份正确this，赋值给that，以供这里使用