[jquery] 간단 탭메뉴 구현법

간단한 탭메뉴 구현법을 소개합니다. 

 

See the Pen 간단 탭메뉴 by Darim (@chocoleaf) on CodePen.

JQuery를 선언해야 제대로 작동합니다. 

 

css

ul.tabs{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li{
  background: none;
  color: #222;
  display: inline-block;
  padding: 10px 25px;
  cursor: pointer;
}

ul.tabs li.current{
  background: #ededed;
  color: #222;
}

.tab-content{
  display: none;  
  padding: 15px 0;
  border-top:3px solid #eee;
}

.tab-content.current{
  display: inherit;
}

 

HTML

<div class="container">
 
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">첫번째 메뉴</li>
    <li class="tab-link" data-tab="tab-2">두번째 메뉴</li>
    <li class="tab-link" data-tab="tab-3">세번째 메뉴</li>
  </ul>
 
  <div id="tab-1" class="tab-content current">
  첫번째 메뉴의 내용이 들어갑니다
  </div>
  
  <div id="tab-2" class="tab-content">
  두번째 메뉴의 내용이 들어갑니다
  </div>
  
  <div id="tab-3" class="tab-content">
세번째 메뉴의 내용이 들어갑니다
   </div>
 
</div>

jquery

$(document).ready(function(){
   
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
 
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
 
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })
 
})