tap栏切换

2021-08-08 17:02:38 作者：互联网

<style>
  .Max_box{width:1000px;height:400px;margin: 0 auto;}
  li{display:inline-block;width:200px;line-height:40px;text-align: center;color:#999}
  .min_box{height:300px;margin-top:10px;position: relative;}
  .min_box div{position: absolute;left: 0;top:0;width:100%;height:100%;display: none;}
</style>
<body>
<div class="Max_box">
  <ul>
    <Li style="color: red"></Li>
    <Li></Li>
    <Li></Li>
    <Li></Li>
  </ul>
<div class="min_box">
  <div style="display: block"></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</div>
<script>
  var lis=document.querySelectorAll("li");//获取所有的li;
  var divs=document.querySelector('.min_box').children;//获取所有在.min_box中的小盒子
  var arr=['red','green','pink','black']//定义一个数组
  for(let i=0;i<lis.length;i++){//得到所有li
    lis[i].innerHTML=arr[i];//将数组中的值给所有li
    lis[i].setAttribute('index',i);//给所有li,设置自定义属性
    lis[i].onclick=function () {//给所有的li绑定点击事件

      for(let i=0;i<lis.length;i++){
        lis[i].style.color='';//将所有li的字体样式设为空
      }
      let index=this.getAttribute("index");//获取当前点击li的自定义属性；
      this.style.color=arr[index];//将点击li字体颜色改为数组下标对应的颜色
      for(let i=0;i<divs.length;i++){//得到所有div
        divs[i].style.display='none';//将所有的div隐藏起来
      }
      divs[index].style.display='block';//将得到的自定义属性值放到divs伪数组中，让对应的下标元素显示出来。
    }
  }
  for(let i=0;i<divs.length;i++){
    divs[i].style.background=arr[i];//给所有div设置对应的颜色
  }

  // for(let i in lis){lis[i].innerHTML=arr[i]}//Es6的forin方法渲染字体
  // for(let i in divs){divs[i].style.backgroundColor=arr[i]};//Es6的forin方法渲染背景色


</script>
</body>

标签：style,tap,arr,li,let,切换,lis,divs
来源： https://www.cnblogs.com/-bfl/p/15115355.html