<style>
#tabwrap {width:1400px;margin:0 auto;height:auto;border:1px solid blue;}
 
.tab_menu{position:relative;width:100%;height:50px;border:1px solid red;padding:0;}
.tab_menu{width:100%;height:50px;border:1px solid red;padding:0;}
.tab_menu ul.list {list-style:none;display:flex;width:100%;padding:0;margin:0;}
.tab_menu ul li {display:block;flex:1;border:1px solid #ccc;height:50px;text-align:center;line-height:50px;}
.tab_menu ul li a {display:block;text-decoration: none;}
.tab_menu .list .btn{font-size:15px;}
.tab_menu .list .cont{display:none; position:absolute;top:130px;left:0; background:#f1f1f1; color:#000;text-align:center; width:100%; height:500px;line-height:100px;}
.tab_menu .list li.is_on {background:#ddd;}
.tab_menu .list li.is_on .btn{font-weight:bold; color:green;}
.tab_menu .list li.is_on .cont{display:block;}

 
.foot {width:1400px;height:200px;border:1px solid #CCC;margin:0 auto;}
</style>
 
<div id="tabwrap">
<div class="tab_menu">
  <ul class="list">
    <li class="is_on">
      <a href="#tab1" class="btn">Tab Button1</a>
      <div id="tab1" class="cont">Tab Content1</div>
    </li>
    <li>
      <a href="#tab2" class="btn">Tab Button2</a>
      <div id="tab2" class="cont">Tab Content2</div>
    </li>
    <li>
      <a href="#tab3" class="btn">Tab Button3</a>
      <div id="tab3" class="cont">Tab Content3</div>
    </li>
    <li>
      <a href="#tab4" class="btn">Tab Button4</a>
      <div id="tab4" class="cont">Tab Content4</div>
    </li>
  </ul>
</div>
</div>
<script>
 const tabList = document.querySelectorAll('.tab_menu .list li');
 
  for(var i = 0; i < tabList.length; i++){
    tabList[i].querySelector('.btn').addEventListener('click', function(e){
      e.preventDefault();
      for(var j = 0; j < tabList.length; j++){
        tabList[j].classList.remove('is_on');
      }
      this.parentNode.classList.add('is_on');
    });
  }
 
</script>
 
<div class="foot">
footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter
</div>