jstab栏切换

时间：2023-03-27 12:57:03 JavaScript

布局一个容器div分为上下两部分，上半部分是tab标签，下半部分是每个标签对应的内容。dividea点击tab选项卡时，当前点击的tab会通过exclusiveidea（先清除所有按钮的classStyle，再通过添加class类名来添加样式）来改变tabs的背景色。因为tabs和contentdiv的个数是一样的，可以通过给tabs设置一个自定义属性index，让每个tabs对应每个contentdiv，在循环遍历的时候，使用变量i作为tabs的自定义index，display隐藏所有内容div，然后通过专属ideadivHTML代码显示当前tab对应的内容桥本有菜桥本有菜内容

三上悠哉内容

枫之恋内容

CSS代码/*容器*/#container{width:400px;}/*容器中的所有按钮*/#containerbutton{width:100px;高度：40px；颜色：#ff5000；font-size:16px;}/*容器中的所有div*/#containerdiv{width:300px;高度：300px；边框：1px实心#000；/*hidden*/display:none;}/*buttoninselectedstate*/.active{background:#800080;}JavaScript//获取整个容器letbox=document.querySelector('#container')//获取容器中的所有按钮letbtn=box.querySelectorAll('button')//获取容器中的所有divletdiv=box.querySelectorAll('div')//为每个按钮添加点击事件for(leti=0;i