jQuery Tab Box 만들기

🔸 jQuery로 Tab Box 기능 구현

ex)

1. 태그 구조

<div class="tab_box">
  <ul class="tabs_nav">
    <li><a href="#con_box1">첫번째</a><li>
    <li><a href="#con_box2">두번째</a><li>
  </ul>
  <div id="con_box1" class="tab_panel">내용1</div>
  <div id="con_box1" class="tab_panel">내용2</div>
</div>

2. jQuery

$(document).ready(function() {
  $('.tab_box').each(function() {
    var $tabList = $(this).find('.tabs_nav');
    var $tabAnchors = $tabList.find('a');
    var $tabPanels = $(this).find('.tab_panel');
    
    //탭 항목 클릭 이벤트
    $tabList.on('click', 'a', function(event) {
      event.preventDefault();
      
      if($(this).hasClass('active')) return; //이미클릭한 tab이면 리턴
      $(this).addClass('active'); //클릭한 a태그에 active 추가
      $tabPanels.hide(); //tab_panel 전체 숨김
      $($(this).attr('href')).show(); //클릭한 a태그 href 이동
    });
    
    $tabAnchors.eq(0).trigger('click');//첫 번째 탭 보여줌
    //혹은 페이지 로드할때 Script 태그에 ?tab_Number=<%=tab_Number%> 로  받아와서 지정
  });
});

3. CSS

.tabs_nav .active {
	background-color : blue;
}