原生js制作选项卡详解，适合无基础的人学习

<div class="tab">
    <ul class="btns">
      <li class="active">房产</li>
      <li>家居</li>
      <li>二手房</li>
    </ul>
    <div class="texts">
      <ul class="show">
        <li><a href="#">275万购昌平邻铁三居 总价20万买一居</a></li>
        <li><a href="#">200万内购五环三居 140万安家东三环</a></li>
        <li><a href="#">北京首现零首付楼盘 53万购东5环50平</a></li>
        <li><a href="#">京楼盘直降5000 中信府 公园楼王现房</a></li>
      </ul>
        <ul>
          <li><a href="#">40平出租屋大改造 美少女的混搭小窝</a></li>
          <li><a href="#">经典清新简欧爱家 90平老房焕发新生</a></li>
          <li><a href="#">新中式的酷色温情 66平撞色活泼家居</a></li>
          <li><a href="#">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
        </ul>
        <ul>
          <li><a href="#">通州豪华3居260万 二环稀缺2居250w甩</a></li>
          <li><a href="#">西3环通透2居290万 130万2居限量抢购</a></li>
          <li><a href="#">黄城根小学学区仅260万 121平70万抛!</a></li>
          <li><a href="#">独家别墅280万 苏州桥2居优惠价248万</a></li>
        </ul>
        </div>
</div>

<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  body{
    font-size: 12px;
  }
  .tab{
    width: 270px;
    height: 270px;
    margin: 0 auto;
  }
  .tab .btns{
    height: 30px;
    line-height: 30px;
  }
  .tab .btns li{
    float: left;
    padding: 0 10px;
    cursor: pointer;
    margin: 0 3px;
    border: 1px solid #acada2;
    border-bottom: 0;
    box-sizing: border-box;
  }
  .active{
    border-top: 3px solid #a26b45!important;
    background: #fff;
  }
  .texts{
    border: 1px solid #537eaa;
    border-top: 3px solid #a26b45;
    box-sizing: border-box;
  }
  .texts ul{
    display: none;
  }
  .show{
    display: block!important;
  }
  .texts ul li{
    line-height: 27px;
    padding-left: 6px;
    cursor: pointer;
    box-sizing: border-box;
    margin: 2px 0;
  }
  .texts ul li:hover{
    background: #ebebeb;
  }
  .texts ul li a{
    text-decoration: none;
    display: block;
    color: #000;
    width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded',function(){
    //1.先获取几个按钮和文本
    var btns=document.querySelectorAll('.btns>li');
    var texts=document.querySelectorAll('.texts>ul');
    //2.遍历
    for(var i=0;i<btns.length;i++){
      btns[i].index=i;//给全部btn加上属性index
      btns[i].onclick=function(event){
          for(var j=0;j<btns.length;j++){
             //点击按钮的时候清除所有按钮和选项栏的样式
             btns[j].classList.remove('active');
             texts[j].classList.remove('show');
          }
                //给点击的按钮和对应的选项栏添加样式
          btns[this.index].classList.add('active');
          texts[this.index].classList.add('show')
        }
      }
  })
</script>