자바스크립트 제이쿼리 탭 메뉴 기능 (JavaScript & jQuery Tab menu)

자바스크립트 (JavaScript)

 

See the Pen 탭 메뉴 자바스크립트 (커스텀 코드) by kimyangsun (@kimyangsun) on CodePen.

 

자바스크립트 제이쿼리 탭 메뉴 기능 예제 (JavaScript & jQuery Tab menu) 코드펜 소스코드입니다.

html 구조와 data-num을 맞춰주고 탭버튼 ul에 tab-js를 넣고 tab-item, tab-contents, tab-inner 등 클래스만 맞춰주면

여러개를 사용하거나 탭 안에 다시 탭을 넣어도 전부 작동합니다.

 

여기서 특이한 점은 자바스크립트 코드를 보면 위에 있는 코드와 아래 주석해둔 코드가 있는데 내용은 똑같습니다.

차이점은 페이지 로드 후에 동적으로 탭이 생성되는 경우에, 위에 있는 코드 대신 사용하는 코드입니다.

(ex : 페이지 로드 후에 어떤 상호작용을 통해 데이터에서 새로운 탭 메뉴가 생성되는 경우 등..)

 

// 탭 콘텐츠 공통
// html 구조와 data-num을 맞춰주고 탭버튼 ul에 tab-js를 넣고 tab-item, tab-contents, tab-inner 등 클래스만 맞춰주면
// 여러개를 사용하거나 탭 안에 다시 탭을 넣어도 전부 작동합니다.
$(function(){
  var tabButton = $('.tab-js .tab-item a');
  tabButton.on('click', function(e){
    e.preventDefault();
    var $this = $(this);
    var num = $this.data('num');
    var target = $this.parent();
    var otherButtons = target.siblings('.tab-item');
    var targetTabContent = target.closest(".tab-container").find('.tab-contents').first();
    var targetTabInner = targetTabContent.find('> .tab-inner[data-num="'+ num +'"]');
    var otherTabInner = targetTabContent.find('> .tab-inner');

    $this.attr('title', '선택됨');
    otherButtons.removeClass('active');
    otherButtons.find('> a').removeAttr('title');
    target.addClass('active');
    otherTabInner.removeClass('active');
    targetTabInner.addClass('active');
  })
});

// 만약 페이지 로딩 후에 동적으로 탭이 생성되는 경우가 있고 그 탭도 똑같이 기능을 해야한다면 아래 코드를 사용하면 됩니다.
// $(document).on('click', '.tab-js .tab-item a', function(e){
//   e.preventDefault();
//   var $this = $(this);
//   var num = $this.data('num');
//   var target = $this.parent();
//   var otherButtons = target.siblings('.tab-item');
//   var targetTabContent = target.closest(".tab-container").find('.tab-contents').first();
//   var targetTabInner = targetTabContent.find('> .tab-inner[data-num="'+ num +'"]');
//   var otherTabInner = targetTabContent.find('> .tab-inner');

//   $this.attr('title', '선택됨');
//   otherButtons.removeClass('active');
//   otherButtons.find('> a').removeAttr('title');
//   target.addClass('active');
//   otherTabInner.removeClass('active');
//   targetTabInner.addClass('active');
// });