// 通过老师讲解
<!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>
.list>div{
display: none;
}
</style>
</head>
<body>
<div class="btn">
<button>娱乐</button>
<button>灰太狼</button>
<button>红太狼</button>
</div>
<div class="list">
<div>
<div>娱乐1</div>
<div>娱乐2</div>
<div>娱乐3</div>
</div>
<div>
<div>灰太狼1</div>
<div>灰太狼2</div>
<div>灰太狼3</div>
</div>
<div>
<div>红太狼1</div>
<div>红太狼2</div>
<div>红太狼3</div>
</div>
</div>
// 引入js文件
<script src="../js/01.js"></script>
</body>
</html>
//js文件
var _btn = document.querySelectorAll(".btn>button")
// 拿到多有button按钮
console.log(_btn)
// 遍历button按钮
_btn.forEach(function (item,index){
item.onclick = function (){
// 看是否点击事件生效
// console.log('11')
// 在此之前我们要遍历按钮将按钮的样式都设置成black，transparent
_btn.forEach(function (item1){
item1.style.color = 'black'
item1.style.backgroundColor = 'transparent'
})
// 点击的时候让点击的按钮变成红色字体，背景色天蓝色
item.style.color = 'red'
item.style.backgroundColor = 'skyblue'
_list = document.querySelectorAll('.list>div')
_list.forEach(function (item2){
// console.log(item3)
// 变里div数组，设置为display：none
item2.style.display = 'none'
// 点击的时候点中按钮的索引对应的list下的div的索引一致
_list[index].style.display = 'block'
})
}
})
