[uiux codepen]tapMenu(영역클릭시 해당내용 노출)

See the Pen Untitled by kaia (@kaiaakim) on CodePen.

<div class="wrap">
  <div class="tabMenu">
    <ul class="list">
      <li class="on"><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
      <li><a href="#">D</a></li>
    </ul>
    <div class="box on">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, eum quasi nostrum iusto maxime laboriosam accusantium architecto placeat, totam sapiente ipsa? Qui natus labore sed quas sunt laboriosam dicta tempore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque deleniti aperiam impedit asperiores ea repellat. Excepturi, delectus deleniti. Sint perspiciatis ut aperiam tenetur ex temporibus debitis numquam provident tempore explicabo!
    </div>
    <div class="box">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis illum harum, minima ipsa fuga quisquam ducimus ipsam illo at voluptatum earum corporis distinctio animi provident natus vel magni expedita odio?Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit voluptatem harum minima praesentium aliquam laudantium rerum explicabo saepe ipsa soluta dolorem sint labore recusandae at, debitis dignissimos in earum provident!
    </div>
    <div class="box">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem delectus, ducimus eos optio deleniti nihil, labore numquam est nemo totam commodi accusantium similique sint, consectetur amet corporis deserunt ex odio! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorem laboriosam quos numquam, veniam modi exercitationem vero. Soluta deserunt at cupiditate tenetur, magni vero maxime pariatur minima repellendus exercitationem, error odit!
    </div>
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde explicabo rerum molestiae, dignissimos totam esse dolorum error debitis, suscipit at cumque sunt magnam! Reiciendis eum odio omnis recusandae ducimus placeat?
      Lorem ipsum dolor sit amet consectetur adipisicing elit. A, vero. Omnis ut sint ratione consequatur quos fugiat, totam magni minima nostrum voluptates hic. Harum nemo ea, corporis excepturi quaerat alias!
    </div>
  </div>
</div>

*{
  margin: 0; padding: 0;
}
a{
  text-decoration: none; color: inherit;
}
li{
  list-style: none;
}
.wrap{
  width: 100vw; height: 100vh;
  overflow: hidden;
}
.tabMenu{
  width: 800px; margin: 50px;
  position: relative;
}
.tabMenu .list{
  display: flex;
  overflow: hidden;
}
.tabMenu .list li{
  width: 25%; height: 50px;
  line-height: 50px; border-bottom: 1px solid #999;
  box-sizing: border-box;
  background: #fff;
}
.tabMenu .list li.on{
  border: 1px solid #999; 
  border-bottom: transparent;
}
.tabMenu .list li a{
  width: 100%; height: 100%;
  text-align: center;
  display: block;
}
.tabMenu .box{
  width: 100%; height: 500px;
  padding: 30px 20px; box-sizing: border-box;
  text-align: center; font-size: 16px; display: none;
  position: absolute; left: 0; top: 50px;
  background: #fff;
}
.tabMenu .box.on{
  display: block;
}

$(function(){
  $(".tabMenu .list li a").on("click", function(){
    var num = $(".tabMenu .list li a").index($(this));//click하는 인덱스
    $(".tabMenu .box").removeClass("on"); //다음액션 전의 것들은 초기화
    $(".tabMenu .box:eq(" + (num) + ")").addClass("on");
    $(".tabMenu .list li").removeClass("on"); //모든 li의 테두리가 지워져라
    $(this).parent().addClass("on");
  });
});