原生js实现tab切换

原生js实现tab切换
1.添加自定义属性，让自己知道点击的时候知道是点击的哪个
2，排他思想，先把其它所有样式去掉，再把自己所需要的样式加上
html代码

  <div class="main">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <div class="content">
      <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ol>
    </div>
  </div>

css样式

ul,ol,li,div{
      padding:0;
      margin:0;
    }
    .main{
      width:600px;
      height: 400px;
      background: #f5f5f5;;
    }
    ul{
      height:50px;
      border-bottom:1px solid #000;
    }
    ul li{
      float: left;
      list-style: none;
      width:80px;
      height: 50px;
      background:orange;
    }
    .active{
      color:#fff;
    }
    .content{
      width:600px;
      height:350px;
      background:#ccc;
      overflow: hidden;
    }
    ol{
      width:100%;
      height:100%;
    }
    ol li{
      width:100%;
      height: 100%;
      float: left;
      background: green;
    }

js代码

   window.onload=function(){
      let ul=document.getElementsByTagName("ul")[0];
      let uls=ul.getElementsByTagName("li");
      let ol=document.getElementsByTagName("ol")[0];
      let ols=ol.getElementsByTagName("li")
      console.log("uls",uls)
      for(let i=0;i<uls.length;i++){
      	//为每个li添加一个自定义属性
        uls[i].index=i;
        uls[i].onclick=function(){
        // 打印看下自己添加的自定义属性
          console.log(uls[i].index)
          // 去所有li的样式
          for(let j=0;j<uls.length;j++){
            uls[j].className="";
            ols[j].style.display="none"
          }
          // 再把当前点击的li所需要的样式加上，this很重要
          uls[this.index].className="active";
          ols[this.index].style.display="block"
        }
      }
    }