点击 某个按钮,让某个按钮对应的 ul 显示,其他的ul 都隐藏
1 -找到所有的按钮 ,并循环
2 -给按钮添加点击事件
3 -点击的时候 获取的对应的按钮 获取按钮对应的下标
4 - 所有的都变为黑 点击的按钮颜色变为红色
5 - 其他的所有ul 都隐藏 按钮对应ul显示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div><button style=" color: black; ">电影票</button><button style="color: red;">飞度</button><button style="color: blue;">致梦想</button><button style="color: orange;">海涛</button></div><div><ul><li>111</li></ul><ul><li>222</li></ul><ul><li>333</li></ul><ul><li>444</li></ul></div></div><script>let btns = document.querySelectorAll('button') //按钮let oUls = document.querySelectorAll('ul') //所有ulfor(let i=0;i<btns.length;i++){btns[i].onclick=function(){for(let j=0;j<btns.length;j++){//把所有按钮颜色变成黑色btns[j].style.color='black'//把所有的ul隐藏oUls[j].style.display='none'}this.style.color='red'oUls[i].style.display='block'}}</script>
</body>
</html>